Hooks使用规则

Posted 2022-02-02 前端e站

 Hooks仅仅是javascript方法，但在使用的时候要遵循正确的使用方式。我们提供一个linter插件来自动检查。

只在最顶层调用Hooks

        不要在循环、条件语句或者嵌套方法中调用Hooks。要在你React方法的顶层里调用。遵循这个方式，你能保证每次组件渲染时Hooks都是按照相同的顺序被调用。这能使React在多个useState和useEffect的情形下正确保存state数据。

只在function组件里调用Hooks

不在普通的JavaScript方法里调用Hooks。你只能

• 在function组件里调用Hooks

• 在自定义Hooks里调用Hooks

遵循这个能保证所有组件里的有状态逻辑足够清晰。

ESLint插件

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

npm install eslint-plugin-react-hooks

// 你的 ESLint 配置

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

        官方未来打算在Create React App和其他工具里引入这个插件。

原因

        如我们之前所学，我们可以在单个组件里使用多个state或effect hooks。

function Form() 
  // 1. Use the name state variable
  const [name, setName] = useState('Mary');

  // 2. Use an effect for persisting the form
  useEffect(function persistForm() 
    localStorage.setItem('formData', name);
  );

  // 3. Use the surname state variable
  const [surname, setSurname] = useState('Poppins');

  // 4. Use an effect for updating the title
  useEffect(function updateTitle() 
    document.title = name + ' ' + surname;
  );

  // ...

        React如何知道那个state来和useState对应？答案是React依赖于Hooks被调用的次序。由于Hooks被调用的次序每次都一样所以我们的这个例子没问题。

// ------------
// 首次渲染
// ------------
useState('Mary')           // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm)     // 2. 添加 effect 以保存 form 操作
useState('Poppins')        // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle)     // 4. 添加 effect 以更新标题

// -------------
// 二次渲染
// -------------
useState('Mary')           // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm)     // 2. 替换保存 form 的 effect
useState('Poppins')        // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle)     // 4. 替换更新标题的 effect

// ...

        只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect) 调用放到一个条件语句中会发生什么呢？

// 🔴 在条件语句中使用 Hook 违反第一条规则
if (name !== '') 
  useEffect(function persistForm() 
    localStorage.setItem('formData', name);
  );

        在第一次渲染中 name !== '' 这个条件值为 true，所以我们会执行这个 Hook。但是下一次渲染时我们可能清空了表单，表达式值变为 false。此时的渲染会跳过该 Hook，Hook 的调用顺序发生了改变：

useState('Mary')           // 1. 读取变量名为 name 的 state（参数被忽略）
// useEffect(persistForm)  // 🔴 此 Hook 被忽略！
useState('Poppins')        // 🔴 2 （之前为 3）。读取变量名为 surname 的 state 失败
useEffect(updateTitle)     // 🔴 3 （之前为 4）。替换更新标题的 effect 失败

        React 不知道第二个 useState 的 Hook 应该返回什么。React 会以为在该组件中第二个 Hook 的调用像上次的渲染一样，对应的是 persistForm 的 effect，但并非如此。从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。

        这就是为什么 Hook 需要在我们组件的最顶层调用。如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：

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

        注意到如果使用了linter插件的话就不需要担心这个问题了。但是你得知道为什么Hooks是这样工作的以及这个规则避免了什么问题。