React Hooks完全上手指南

hooks 是 函数组件独有的 。在不编写 class 的情况下使用 state 以及其他的 React 特性

只能在函数组件的顶级作用域使用；只能在函数组件或者其他 Hooks 中使用 。

hooks 使用时必须确保

使用 Hooks 的一些特性和要遵循某些规则。

React 官方提供了一个 ESlint 插件，专门用来检查 Hooks 是否正确被使用。

useState 的入参也可以是一个函数。当入参是一个函数的时候，这个函数只会在这个组件初始化渲染的时候执行

setState 也可以接收一个函数作为参数： setSomeState(prevState => {})

useEffect 会在每次 DOM 渲染后执行，不会阻塞页面渲染。

在页面更新后才会执行 。即：每次组件 render 后，判断依赖并执行。

它同时具备 componentDidMount 、 componentDidUpdate 和 componentWillUnmount 三个生命周期函数的执行时机。

useEffect 共两个参数： callback 和 dependences 。规则如下

依赖项一般是一个常量数组，而不是一个变量。因为一般在创建 callback 的时候，你其实非常清楚其中要用到哪些依赖项了。

React 会使用 浅比较 来对比依赖项是否发生了变化，所以要 特别注意数组或者对象类型 。

如果你是每次创建一个新对象，即使和之前的值是等价的，也会被认为是依赖项发生了变化。这是一个刚开始使用 Hooks 时很容易导致 Bug 的地方。

useLayoutEffect 的用法跟 useEffect 的用法是完全一样的，它们之间的唯一区别就是执行的时机

useLayoutEffect 会阻塞页面的渲染 。会保证在页面渲染前执行，也就是说页面渲染出来的是最终的结果。

如果使用 useEffect ，页面很可能因为渲染了2次而出现抖动

绝大多数情况下，使用 useEffect 即可

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。

useReducer 用法跟 Redux 非常相似，当 state 的计算逻辑比较复杂又或者需要根据以前的值来计算时，使用这种 Hook 比 useState 会更好

结合 context API，我们可以模拟 Redux 的操作

useCallback 和 useMemo 设计的初衷是用来做性能优化的

useCallback 缓存的是 方法的引用

useMemo 缓存的则是 方法的返回值

使用场景是 减少不必要的子组件渲染

若要实现 class 组件的 shouldComponentUpdate 方法，可以使用 React.memo 方法。

区别是它只能比较 props ，不会比较 state

useRef 值的变化不会引起组件重绘，可以存一些跟界面显示无关的变量

函数式组件不能设置 ref ，想保存其中的某些值，可以通过 React.forwardRef

自定义 Hook 是一个函数，但是 名称必须是以 use 开头 ，函数内部可以调用其他的 Hook

自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性

跟普通的 hook 一样， 只能在函数组件或者其他 Hooks 中使用

热门标签