react

react 16.7 hooks rules

2018-10-31  本文已影响1人  xiaohesong

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

只可以在顶层调用Hook

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

只从React Functions调用Hooks

不要从常规JavaScript函数中调用Hook 相反,你可以:

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

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以这种方式工作,以及规则阻止了哪些问题。

关于更多地hooks系列可前往此处查看

上一篇下一篇

猜你喜欢

热点阅读