rules

Hooks是JavaScript函数，但在使用它们时需要遵循两个规则。我们提供了一个linter插件来自动执行这些规则：

只可以在顶层调用Hook

不要在循环，条件或嵌套函数中调用Hook。 相反，总是在React函数的顶层使用Hooks。通过遵循此规则，可以确保每次组件呈现时都以相同的顺序 调用Hook。这就是允许React在多个useState和useEffect调用之间正确保留Hook状态的原因。 （如果你很好奇， 我们将在下面深入解释。）

只从React Functions调用Hooks

不要从常规JavaScript函数中调用Hook。 相反，你可以：

  • 从React函数组件调用Hooks。

  • 从自定义Hooks调用Hooks(后面会介绍到)

通过遵循此规则，可以确保组件中的所有有状态逻辑从其源代码中清晰可见。

ESLint Plugin

我们发布了一个名为eslint-plugin-react-hooks的ESLint插件，它强制执行这两个规则。如果您想尝试，可以将此插件添加到项目中：

npm install eslint-plugin-react-hooks@next
// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

将来，有打算默认将此插件包含在Create React App和类似的工具包中。

详细说明

之前有说过，一个组件可以配置多个状态变量或者效果钩子：

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如何知道哪个状态对应于哪个useState调用？答案是 React依赖于调用Hooks的顺序。 我们的示例有效，因为Hook调用的顺序在每个渲染上都是相同的：

// ------------
// First render
// ------------
useState('Mary')           // 1. 初始化`name`状态变量为 'Mary'
useEffect(persistForm)     // 2. 添加一个效果
useState('Poppins')        // 3. 初始化`surname`状态变量为 'Poppins'
useEffect(updateTitle)     // 4. 添加一个效果

// -------------
// Second render
// -------------
useState('Mary')           // 1. 读取`name`状态变量 (参数被忽略)
useEffect(persistForm)     // 2. 替换之前的效果
useState('Poppins')        // 3. 类似于上面的`name state`
useEffect(updateTitle)     // 4. 也是替换成现在的这个
// ...

只要Hook调用的顺序在渲染之间是相同的，React就可以将一些本地状态与它们中的每一个相关联。但是如果我们在条件中放置Hook调用（例如，persistForm效果）会发生什么？

useState('Mary')           // 1. 读取`name`状态变量 (参数被忽略)
// useEffect(persistForm)  // 🔴这个Hook被干掉了
useState('Poppins')        // 🔴 2 (但是之前是第三步). 读取`surname`状态变量失败
useEffect(updateTitle)     // 🔴 3 (但是之前是第四步). 替换`effect`失败

React不知道第二次useState Hook调用返回什么。 React期望此组件中的第二个Hook调用对应于persistForm效果，就像在前一个渲染中一样，但它不再存在。从那时起，在我们跳过的那个之后的每个下一个Hook调用也会移动一个，导致错误。

这就是为什么我们需要在组件顶层调用Hook的原因。 如果我们想要有条件地运行一个效果，我们可以把这个条件放在我们的Hook中：

useEffect(function persistForm() {
    // 👍 We're not breaking the first rule anymore
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

请注意，如果使用提供的lint规则，则无需担心此问题。 但是现在你也知道为什么Hooks以这种方式工作，以及规则阻止了哪些问题。

PreviousoverviewNextstate-hook

Last updated