React Hook

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state

• Hook 就是 JaveScript 函数

• Hook的规则

  • 只在函数最外层调用 Hook。不在循环、条件判断或子函数中调用，因为 React 靠 Hook 的调用顺序正确地将内部 state 和对应的 Hook 进行关联，若要有条件的执行 Hook，可将判断放在 Hook 的内部

    useEffect(() => {
    if (name !== '') {
     localStorage.setItem('forData', name);
    }
    })

  • 只能在 React 函数组件或自定义 Hook 中调用 Hook，不在其他 JS 函数中调用

• Hook 的每次调用都有一个独立的 state，因此何以在单个组件中多次调用同一个 Hook
• 自定义 Hook 都以 “use” 开头
• Hook 在 class 内部不起作用，可以用 Hook 来取代 class

自定义 Hook

通过自定义 Hook，将组件逻辑提取到可重用的函数中
8个常用的自定义hooks

Hook API

Hook API