世界上最伟大的投资就是投资自己的教育

首页React
xiaohesong · 凡人

react16.7-alpha hooks 之规则

xiaohesong发布于1515 次阅读

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

只可以在顶层调用 Hook

不要在循环,条件或嵌套函数中调用 Hook。 相反,总是在React函数的顶层使用Hooks。通过遵循此规则,可以确保每次组件呈现时都以相同的顺序
调用Hook。这就是允许React在多个useStateuseEffect调用之间正确保留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以这种方式工作,以及规则阻止了哪些问题。

下一节关于 hooks 的自定义钩子,请点击前往

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
统计信息
    学员: 29003
    视频数量: 1973
    文章数量: 489

© 汕尾市求知科技有限公司 | Rails365 Gitlab | Qiuzhi99 Gitlab | 知乎 | b 站 | 搜索

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top