不要在循环，条件或嵌套函数中调用 Hook-技术圈

只在最顶层使用 Hook

不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)

我们可以在单个组件中使用多个 State Hook 或 Effect Hook

function Form() {  // 1. 使用变量名为 name 的 state  const [name, setName] = useState('Mary');
  // 2. 使用 effect 以保存 form 操作  useEffect(function persistForm() {    localStorage.setItem('formData', name);  });
  // 3. 使用变量名为 surname 的 state  const [surname, setSurname] = useState('Poppins');
  // 4. 使用 effect 以更新标题  useEffect(function updateTitle() {    document.title = name + ' ' + surname;  });
  // ...}

那么 React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序。

let hookStates = []; // 放着此组件的所有的hooks数据let hookIndex = 0; // 代表当前的hooks的索引function useState(initialState){  // 如果有老值取老值,没有取默认值  hookStates[hookIndex] = hookStates[hookIndex] || initialState;  // 暂存索引  let currentIndex = hookIndex;  function setState(newState){    hookStates[currentIndex] = newState;    render();  }  return [hookStates[hookIndex++], setState];}

因为我们的示例中，Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作：

// ------------// 首次渲染// ------------useState('Mary')           // 1. 使用 'Mary' 初始化变量名为 name 的 stateuseEffect(persistForm)     // 2. 添加 effect 以保存 form 操作useState('Poppins')        // 3. 使用 'Poppins' 初始化变量名为 surname 的 stateuseEffect(updateTitle)     // 4. 添加 effect 以更新标题
// -------------// 二次渲染// -------------useState('Mary')           // 1. 读取变量名为 name 的 state（参数被忽略）useEffect(persistForm)     // 2. 替换保存 form 的 effectuseState('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。但是下一次渲染时我们可能清空了 name，表达式值变为 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);    }  });

不过你现在知道了为什么 Hook 会这样工作，也知道了这个规则是为了避免什么问题。

hooks 实现原理

import React from "react";import ReactDOM from "react-dom";
// ["Mary", undefined, "Poppins", undefined]let hookStates = [];let hookIndex = 0;function useState(initialState){  hookStates[hookIndex]=hookStates[hookIndex] || initialState;  let currentIndex = hookIndex;  function setState(newState){    hookStates[currentIndex] = newState;    render();  }  return [hookStates[hookIndex++], setState];} 
function useEffect(callback,dependencies){  if(hookStates[hookIndex]){      let lastDeps = hookStates[hookIndex];      let same = dependencies.every((item,index)=>item === lastDeps[index]);      if(same){        hookIndex++;      }else{        hookStates[hookIndex++] = dependencies;         setTimeout(callback);      }  }else{     hookStates[hookIndex++] = dependencies;     setTimeout(callback);  }}
function Counter() {  const [name, setName] = useState("Mary");
  useEffect(function persistForm() {    localStorage.setItem("formData", name);  });
  const [surname, setSurname] = useState("Poppins");
  useEffect(function updateTitle() {    document.title = name + ' ' + surname;  });  return (    <>      <p>        {name}:{surname}      </p>      <button onClick={() => setName("张")}>姓</button>      <button onClick={() => setSurname("三")}>名</button>    </>  );}function render() {  hookIndex = 0;  ReactDOM.render(<Counter />, document.getElementById("root"));}render();