其他分享
首页 > 其他分享> > React Hook介绍(三): Hook必须遵守的两个规则

React Hook介绍(三): Hook必须遵守的两个规则

作者:互联网

一、两个强制性规则:

  (一)只在最顶层使用 Hook

       记住别在循环,条件或嵌套函数中定义即可,因为hook它必须按顺序执行,它对state的控制才正确。

(二)只在 React 函数中调用 Hook:

      不要在普通的 JavaScript 函数中调用 Hook,即只能在React的函数组件中调用,另外也可以在自定义hook中调用其它的hook.

     

二、安装ESLink插件:

为了保证Hook开发中符合以上2个规则要求,可以在开发工具中安装: eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则,即:

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 的依赖
  }
}

标签:react,调用,hook,hooks,React,Hook,遵守
来源: https://blog.51cto.com/u_10976476/2845740