为什么 hooks 不能放在循环或者条件判断语句里？

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

这个限制在开发中也确实会时常影响到我们的开发体验，比如函数组件中出现 if 语句提前 return 了，后面又出现 Hook 调用的话，React 官方推的 eslint 规则也会给出警告。

​
function App(){
  if (xxx) {
    return null;
  }
 
  // ❌ React Hook "useState" is called conditionally. 
  // React Hooks must be called in the exact same order in every component render.
  useState();
  
  return 'Hello'
}
 
​

这是因为 hooks 为了在函数组件中引入状态，维护了一个有序表。

这样每次执行才能保证状态能对应上。

比如第一次执行函数组件时，我们拿到状态 count（通过 setState，初始值为 0 ）和 isDone（通过 setState，初始值为 false），它们其实被保存到一个有序表中，它们的值会记录下来： [0, true] 。

第二次执行函数组件，setState 会 按顺序 从这个表中拿出 0 和 true，赋值给 count 和 isDone。

如果你把 hook 写到判断条件下，导致某个 setState 不执行了，这里我们假设 count 的 setState 因为判断条件没有执行，会发生什么？结果是 isDone 拿到了 0，发生了错位。

函数本身不能保存状态，我们需要额外维护一个有序的表，在执行 setState 之类的 hook 时，将它们保存到这个表里。

这要求每次函数组件的 hook 执行的位置相同，数量正确，否则会导致错位，不能拿到预期的状态值。