Hooks 作用
- 让函数组件领有 class 组件的个性（生命周期及状态）
- 状态逻辑复用
内置钩子
useState(class 组件 state)
useEffect
componentDidMount(第二个参数为空)、componentDidUpdate(第二个参数不为空) 和 componentWillUnmount（第一个参数返回值）三个生命周期的组合
useLayoutEffect（应用办法同 useEffect）
区别：在浏览器执行绘制之前，useLayoutEffect 外部的更新打算将被同步刷新。阻塞渲染。
useLayoutEffect（应用办法同 useEffect）
区别：在浏览器执行绘制之前，useLayoutEffect 外部的更新打算将被同步刷新。阻塞渲染。
useReducer
useState 的代替计划，useState 会笼罩原来的 state，useReducer 能够解决或合并旧 state，生成新的 state。
它接管一个形如 (state, action) => newState 的 reducer，并返回以后的 state 以及与其配套的 dispatch 办法。
const [state, dispatch] = useReducer(reducer, initialArg, init);useCallback
useCallback(fn, deps)，返回一个 memoized 回调函数。
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
useMemo
把“创立”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项扭转时才从新计算 memoized 值。相似于 vue computed 计算属性。
Hook 应用规定
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其余 JavaScript 函数中调用。