React Hooks (一)

特性

1. 多个状态不会产生嵌套，写法还是平铺的
2. 允许函数组件使用 state 和部分生命周期
3. 更容易将组件的 UI 与状态分离

Function state 与 Class state 区别

1. Function state 的粒度更细，Class state 过于无脑
2. Function state 保存的是快照，Class state 保存的是最新值
3. 引用类型的情况下，Class state 不需要传入新的引用，而 Function state 必须保证是个新的引用

快照（闭包） VS 最新值（引用）

class component 可以通过 this.state 引用到最新的 state，在 function component 里面取 state 是通过闭包获取的

useRef

useRef 是一个对象，它拥有一个 current 属性，并且不管函数组件执行了多少次，而 useRef 返回的对象永远都是原来的那一个。特点：

• useRef 是一个只能用于函数组件的方法
• useRef 是除字符串 red、函数 ref、createRef 之外的第四种获取 ref 的方法
• useRef 在渲染周期内永远不会改变，因此可以用来引用某些数据
• 修改 ref.current 不会引发组件重新渲染

useRef VS createRef

• 两者都是获取 ref 的方式，都有一个 current 属性
• useRef 只能用于函数组件，createRef 可以用在类组件中
• useRef 在每次重新渲染后都保持不变，而 createRef 每次都会发生变化

useEffect

常常用于一些副作用的操作

useMemo

常常用于缓存一些复杂计算的结果

useCallback

常常用来缓存函数

匿名函数导致不必要的渲染

匿名函数在每一次组件重新渲染的时候都会生成一个重复的匿名箭头函数，导致传给组件的参数发生了改变，对性能造成一定的损耗。可以使用 useCallback 指定依赖项，在无关更新之后，通过 useCallback 取的还是上一次缓存起来的函数