使用 React Hook 需要遵循的规则

使用 Hook 需要遵循的规则

Hook 的本质是 js 函数，使用 Hook 需要遵循下面两条规则：

• 只在顶层使用 Hook

  为了保证 Hook 在每次都以相同的顺序被调用（只有 Hook 的调用顺序在多次渲染之间保持一致，React 才能正确地将内部 state 和对应的 Hook 进行关联），确保总是在 React 函数的顶层调用 Hook，不要在循环、条件、嵌套中调用 Hook

• 只在 React 函数组件中调用 Hook（自定义 Hook 中也可以调用 Hook）

使用 ESlint 插件

官方推荐使用 eslint-plugin-react-hooks 插件强制执行 Hook 规则。

//下载插件
npm install eslint-plugin-react-hooks --save-dev

//配置eslint
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
  }
}

如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

useEffect(function persistForm() {
   // 👍 将条件判断放置在 effect 中
   if (name !== '') {
     localStorage.setItem('formData', name);
   }
 });