状态逻辑无处不在，使用 Hook 的其中一个目的就是要解决：在 class 中，同一个生命周期函数经常包含不相关的逻辑，但又把相关的逻辑分离到了几个不同的生命周期函数中的问题。
首先需要谨记 hooks 的规则：
- 只能在最高层级调用 hooks，不能在循环， 条件或者嵌套方法中调用。
- 只能在函数组件中调用 hooks， 不能在普通的函数方法中调用（自定义 Hook 除外）。
1、useEffect 发生在第一次渲染之后和每次更新之后，对应 React class 组件中的 componentDidMount、componentDidUpdate
2、使用 useEffect，react 会保存你传递的函数，这个函数称之为 effect，并且在 dom 更新之后调用它。每次在dom更新之后重新渲染时，都会生成新的 effect，替换掉之前的。
3、在 effect 中 return 一个函数，这个返回的函数称之为清除函数，会在组件卸载的时候执行，也就是 class 组件中的 componentWillUnmount。这是 effect 可选的清除机制。react 会默认在调用新的 effect 时清除上一个 effect(因为 effect 会在每次渲染的时候都执行，所以每次调用都会对上一次做清除)。但如果需要在组件卸载时做一些额外的事情，比如clearTimeOut，除了默认的清除之外，需要手动增加一个 return () => clearInterval(timer)
4、如果在 useEffect 中使用了多个 effect，react 将按照声明的顺序一次调用每一个 effect
5、如果使用了依赖项（依赖项相当于在componentDidUpdate中，对某个状态的前后状态做比较），需要确保数组中包含了所有外部作用域中会随时间变化且在 effect 中用到的变量，如果只想执行一次，传递一个空数组。
6、effect 会在浏览器完成画面渲染之后 延迟调用，不会阻塞浏览器更新屏幕的操作。但并非所有的 effect 可以延迟执行，如果是用户可见的DOM变更就必须要同步执行，这样用户才不会感觉到视觉上的不一致，为此 React 提供了 useLayoutEffect 来处理此类 effect
网友评论