React Hooks 学习

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 函数中调用。