关于 React 中的 hook 要顺序调用这件事

React 官方提出了两条使用 Hook 的规则

• 只在最顶层使用 Hook，不要在循环，条件或嵌套函数中调用 Hook
  确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。
• 只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook

如果偏不遵守呢？

export default function App() {
  if (Math.random() > 0.5) {
    useState(10000);
  }
  const [value, setValue] = useState(0);

  return (
    

       setValue(value + 1)}>+
      {value}
    
  );

像上面这种情况，当你点击的时候，

更具体一点的情况就是，有时候状态不满足我们预期条件的时候，希望通过 if else 去控制更新。很遗憾这样是不可以的。

为什么要做出这种限制

因为，React 它是通过链表去实现 hooks 的调用的。也可以简单理解为通过数组下标去访问实现的。本质上就是，去顺序调用不同的 hooks。第一个 hook 执行完了之后，通过 .next 指向下一节点，然后就可以执行下一 hook。

为什么顺序执行对 hook 很重要

就很多人下意识肯定都会想，那react为什么不用key做映射呢，类似与 Map 类型，每个 hook 都用唯一的key对应，这样的话不就可以不用顺序调用了吗？

很关键的一点就是，你使用 key 值取映射 hook 的话。那么自定义的 hook 被多个组件调用的话，你很难不保证之前有没有同名的key在其他组件内。

那我要是用 Symbol 呢，这样就不重复了吧。很遗憾，那就不能很好地复用了，因为 key 值的唯一性使得总是同一个 key调用了 hook。

这里只是简单叙述了一下，详细文章可以看这个由 Dan (react 核心开发，redux作者)写的：为什么顺序调用对 React Hooks 很重要？