为什么 Hooks，千万不要在 if 语句或者 for 循环语句中使用！

如果组件中多次使用 useState 怎么办？React 如何“记住”哪个状态对应哪个变量？

React 是完全根据 useState 的调用顺序来“记住”状态归属的，假设组件代码如下：

const Counter = () => {
  const [count, setCount] = useState(0);
  const [foo, updateFoo] = useState('foo');
  
  ...
}

每一次 Counter 被渲染，都是第一次 useState 调用获得 count 和 setCount，
第二次 useState 调用获得 foo 和 updateFoo（这里我故意让命名不用 set 前缀，可见函数名可以随意）。

React 是渲染过程中的“上帝”，每一次渲染 Counter 都要由 React 发起，所以它有机会准备好一个内存记录，

当开始执行的时候，每一次 useState 调用对应内存记录上一个位置，而且是按照顺序来记录的。

React 不知道你把 useState 等 Hooks API 返回的结果赋值给什么变量，但是它也不需要知道，它只需要按照 useState 调用顺序记录就好了。

正因为这个原因，Hooks，千万不要在 if 语句或者 for 循环语句中使用！

像下面的代码，肯定会出乱子的：

const Counter = () => {
    const [count, setCount] = useState(0);
    if (count % 2 === 0) {
        const [foo, updateFoo] = useState('foo');
    }
    const [bar, updateBar] = useState('bar');
  ...
}

因为条件判断，让每次渲染中 useState 的调用次序不一致了，于是 React 就错乱了。

在React中，Hooks（如useState、useEffect等）应当只在函数组件的顶层调用。这是因为React通过静态分析来确保Hooks的正确使用，它们必须按照自上而下的顺序被调用，并且不能在条件语句或循环体内调用。

以下是不推荐在条件语句或循环中使用Hooks的原因：

1. 违反规则一致性：

   • React Hooks的一个关键原则是每次渲染时都按照相同顺序执行。如果在if语句或者for循环里使用Hook，那么其执行顺序将变得不确定，这会打破React内部对Hook执行顺序的依赖和管理。

2. 状态管理混乱：

   • 如果允许在条件分支内创建状态，会导致组件状态逻辑难以理解和维护。每个状态都应该与组件的生命周期直接相关，而不是根据运行时条件临时创建。

3. 潜在的问题与错误：

   • 在条件语句或循环中使用Hook可能导致意外的行为，例如某些状态可能不会被正确地初始化或清理，造成内存泄漏等问题。

4. 代码可读性和可维护性下降：

   • 将Hook置于非顶层会使代码结构变得复杂，降低可读性。遵循统一的规则可以提高代码的一致性和团队协作效率。

因此，当需要根据条件决定是否使用某个Hook时，请考虑如何重构代码以保持Hook始终在函数组件的顶层调用。例如，可以通过合并条件分支共享的状态，或者在更高级别的抽象中处理条件判断。