React 16.7.0-alpha hooks 之规则

转载于免费视频网 www.rails365.net

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