常见 Hooks

{ state,

setState } = useState(false);

// 第二次使用 const

{ state: counter,

setState: setCounter } = useState(0)

解决问题

组件间逻辑复用复杂组件理解

难以理解的class

使用限制

不再循环、条件和嵌套函数中调用(链表实现Hook，可能导致数组取值错位)

仅在函数组件中调用hook(因为没有 this)

useLayoutEffect和useEffect

共同点

都是处理副作用，包括 DOM改变，订阅设置，定时器操作

不同点

useEffect异步调用，按顺序执行，屏幕像素改变后执行，可能会闪烁

useLayoutEffect在所有DOM变更后同步调用，处理 DOM操作，样式调整；改变屏幕像素之前执行(会推迟页面显示的时间，先改变DOM后渲染)，不会闪烁，总是比 useEffect先执行！

useLayoutEffect 和 componentDidMount，componentDidUpdate 执行时机一样，在浏览器将所有变化渲染到屏幕之前执行

建议使用 useEffect！建议使用 useEffect！建议使用 useEffect！避免阻塞视觉更新

页面有异常就再替换为 useLayoutEffect

常见 Hooks

useState，useEffect，useContext，useReducer，useRef，useMemo，useCallback，useLayoutEffect， useImperativeHandle，useDebugValue

useMemo

当父组件中调用子组件时，父组件的state变化，会导致父组件更新，子组件即使没有变化，也会更新