我打破了-React-Hook-必须按顺序、不能在条件语句中调用的枷锁

// ❌ 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 (

结果是这样：

破解限制

有没有办法破解限制呢？

如果要破解全局索引递增导致的 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 (

这样，通过 _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 的结构。

改造源码

来试着改造一下 Preact 源码，它的 Hook 包的位置在 hooks/src/index.js 下，找到 useState 方法：

export function useState(initialState) {
currentHook = 1;
return useReducer(invokeOrReturn, initialState, undefined);
}
复制代码

它的底层调用了 useReducer，所以新增加一个 key 参数透传下去：

• export function useState(initialState, key) {
  currentHook = 1;
• return useReducer(invokeOrReturn, initialState, undefined, key);
  }
  复制代码

useReducer 原本是通过全局索引去获取 Hook state：

// 全局索引
let currentIndex

export function useReducer(reducer, initialState, init) {
const hookState = getHookState(currentIndex++, 2);
hookState._reducer = reducer;

return hookState._value;
}
复制代码

改造成兼容版本，有 key 的时候优先传入 key 值：

// 全局索引
let currentIndex

• export function useReducer(reducer, initialState, init, key) {
• const hookState = getHookState(key || currentIndex++, 2);
  hookState._reducer = reducer;

return hookState._value;
}
复制代码

最后改造一下 getHookState 方法：

function getHookState(index, type) {
const hooks =
currentComponent.__hooks ||
(currentComponent.__hooks = {
_list: [],
_pendingEffects: [],
});

// 传入 key 值是 string 或 symbol 都可以

• if (typeof index !== ‘number’) {
• if (!hooks._list[index]) {

•  hooks._list[index] = {};
  

• }
• } else {
  if (index >= hooks._list.length) {
  hooks._list.push({});
  }
  }
  // 这里天然支持 key 值取用的方式
  return hooks._list[index];
  }
  复制代码

这里设计成传入 key 值的时候，初始化就不往数组里 push 新状态，而是直接通过下标写入即可，原本的取状态的写法 hooks._list[index] 本身就支持通过 key 从数组上取值，不用改动。

至此，改造就完成了。

来试试新用法：

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

return (

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！