React学习笔记(2) Hooks

22.4.3 updated

关于hooks

React16.8的版本更新了Hooks功能。意味着函数式组件也可以拥有state属性。自此，类式组件基本完全可以被函数式组件替代。（除非要利用生命周期进行一些骚操作）。这也让利用React进行的开发更贴近"函数式编程"的潮流。

useState()

function App() {
  const [value,setValue]= useState(0);
  return (
      <div>
         <button onClick={()=>{
           setValue(value+1)
         }}>click to add 1</button>
        <div>
           value={value}
        </div>
      </div>
  );
}
//注意到如上代码使用了useState
//[]中两个参数
//第一个相当于class中state中的一个属性（变量），而第二个参数是一个方法（函数），用以改变这个属性的值。
//useState()括号中为该属性的初始值
//当我们需要改变value的值时，在class中

this.setState({value:this.state.value+1})

//而在hooks中直接
setValue(value+1)
//不要太方便，且省去了各种this来this去

不过来点面试题会发现其实看上去简单的东西也会有很多反直觉的坑。师哥给我丢了一道。

function App() {
    const [n, setN] = useState(0);
     return (
          <div>
            <h1>{n}</h1>
            <button onClick={() => setN(x => x + 1)}>+1</button>
            <button onClick={() => setTimeout(() => console.log(n), 3000)}>log</button>
          </div>
        )
}
//先点log，然后立即点+1,3s后会打印出啥
//答案是0
//因为函数式组件在+1后进行了刷新，相当于重新执行了一下这个函数，并且创建了一个新的n
//但是console.log中的n是通过闭包捕获的，函数第一次执行时的n,所以无论函数再怎么被翻江倒海
//打印出的值始终是第一次的n

useEffect()