react Hook 规则

最新推荐文章于 2025-04-20 01:03:58 发布

菜是原罪*

最新推荐文章于 2025-04-20 01:03:58 发布

阅读量847

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_43661347/article/details/116709089

本文介绍了React Hooks的两个核心规则：只在最顶层使用Hook和只在React函数中调用Hook。强调了条件执行Hook的正确做法，即在effect内部进行判断。还提到了eslint-plugin-react-hooks插件用于检查Hook的使用规范。此外，解释了如何通过传递空数组来实现只运行一次的effect，并提及React使用Object.is算法比较state。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook;
如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

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

只在 React 函数中调用 Hook
不要在普通的 JavaScript 函数中调用 Hook。你可以：

✅ 在 React 的函数组件中调用 Hook
✅ 在自定义 Hook 中调用其他 Hook (我们将会在下一页中学习这个。)

ESLint 插件
我们发布了一个名为 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 使用 Object.is 比较算法来比较 state。;

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循输入数组的工作方式。