关于react.js: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 函数中调用。