REACT: 为什么不能在if或循环里调用hooks

关键词：链表， 执行顺序

 

根本原因：hook之间是通过链表形式进行关联的，hook有next属性来指向下一个hook，如果放在循环、条件中，会破坏原本的结构，一旦变化了，就会出现异常

 

比较官方的理由：

1. 违反规则一致性：

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

2. 状态管理混乱：

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

3. 潜在的问题与错误：

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

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

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

 

很不错的详解： https://juejin.cn/post/7279325329118625853