React Hooks 学习 react.js

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 【React Hooks 学习】把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。类似于vue computed计算属性。
Hook 使用规则