Hooks

（待完善，期待大佬贡献相关最佳实践）

Hook 规则

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

Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。react官方提供了一个 linter 插件来强制执行这些规则：

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)

只在 React 函数中调用 Hook

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

✅ 在 React 的函数组件中调用 Hook

✅ 在自定义 Hook 中调用其他 Hook

遵循此规则，确保组件的状态逻辑在代码中清晰可见。

ESLint 插件

使用 eslint-plugin-react-hooks 的 ESLint 插件来强制执行规则。如果你想尝试一下，可以将此插件添加到你的项目中：

安装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 的依赖

}

}