为什么不能再循环，条件或嵌套函数中调用 React Hook

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'
}

其实是个挺常见的用法，很多时候满足某个条件了我们就不希望组件继续渲染下去。但由于这个限制的存在，我们只能把所有 Hook 调用提升到函数的顶部，增加额外开销。

由于 React 的源码太复杂，接下来本文会以原理类似但精简很多的 Preact 的源码为切入点来调试、讲解。

限制的原因

这个限制并不是 React 团队凭空造出来的，的确是由于 React Hook 的实现设计而不得已为之。

以 Preact 的 Hook 的实现为例，它用数组和下标来实现 Hook 的查找（React 使用链表，但是原理类似）。

// 当前正在运行的组件
let currentComponent

// 当前 hook 的全局索引
let currentIndex

// 第一次调用 currentIndex 为 0
useState('first') 

// 第二次调用 currentIndex 为 1
useState('second')

可以看出，每次 Hook 的调用都对应一个全局的 index 索引，通过这个索引去当前运行组件 currentComponent 上的 _hooks 数组中查找保存的值，也就是 Hook 返回的 [state, useState]

那么假如条件调用的话，比如第一个 useState 只有 0.5 的概率被调用：

// 当前正在运行的组件
let currentComponent

// 当前 hook 的全局索引
let currentIndex

// 第一次调用 currentIndex 为 0
if (Math.random() > 0.5) {
  useState('first')
}

// 第二次调用 currentIndex 为 1
useState('second')

在 Preact 第一次渲染组件的时候，假设 Math.random() 返回的随机值是 0.6，那么第一个 Hook 会被执行，此时组件上保存的 _hooks 状态是：

_hooks: [
  { value: 'first', update: function },
  { value: 'second', update: function },
]

用图来表示这个查找过程是这样的：

假设第二次渲染的时候，Math.random() 返回的随机值是 0.3，此时只有第二个 useState 被执行了，那么它对应的全局 currentIndex 会是 0，这时候去 _hooks[0] 中拿到的却是 first 所对应的状态，这就会造成渲染混乱。

没错，本应该值为 second 的 value，莫名其妙的被指向了 first，渲染完全错误！
以这个例子来看：

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

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>+</button>
      {value}
    </div>
  )
}

破解限制

有没有办法破解限制呢？

如果要破解全局索引递增导致的 bug，那么我们可以考虑换种方式存储 Hook 状态。

如果不用下标存储，是否可以考虑用一个全局唯一的 key 来保存 Hook，这样不是就可以绕过下标导致的混乱了吗？

比如 useState 这个 API 改造成这样：

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

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>+</button>
      {value}
    </div>
  );
}

这样，通过 _hooks[‘key’] 来查找，就无所谓前序的 Hook 出现的任何意外情况了。

也就是说，原本的存储方式是：

_hooks: [
  { value: 'first', update: function },
  { value: 'second', update: function },
]

改造后：

_hooks: [
  key1: { value: 'first', update: function },
  key2: { value: 'second', update: function },
]

注意，数组本身就支持对象的 key 值特性，不需要改造 _hooks 的结构。

改造源码

详细请看原文章 https://github.com/sl1673495/blogs/issues/79