React Hook笔记

1. Hook优缺点

优势：

• 提供组件间复用功能
• 同一业务逻辑代码相对集中

劣势：

• 没有对应getSnapshotBeforeUpdate，getDerivedStateFromError 和 componentDidCatch生命周期的Hook等价写法

2. Hook不同点

setState

• React确保setState函数的标识是稳定的，并且不会在组件重新渲染时发生变化，可以在useEffect或useCallback的依赖列表中省略setState
• setState会使用Object.is比较算法来比较state，如果相等则跳过子组件的渲染和effect的执行
• setState不会自动合并对象，需要用函数式手动合并对象

useEffect

• useEffect只会在每轮渲染后延迟执行

3. 对应关系

• constructor --- useState传入函数初始化
• componentDidMount, componentWillUnmount --- useEffect(() => {}, [])
• componentDidMount, componentDidUpdate --- useEffect