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

作者 : 开心源码 本文共5044个字,预计阅读时间需要13分钟 发布时间: 2022-05-14 共107人阅读

React 官网详情了 Hook 的这样一个限制:

不要在循环,条件或者嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在屡次的 useStateuseEffect 调用之间保持 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 为 0useState('first') // 第二次调用 currentIndex 为 1useState('second')复制代码

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

那么如果条件调用的话,比方第一个 useState 只有 0.5 的概率被调用:

// 当前正在运行的组件let currentComponent// 当前 hook 的全局索引let currentIndex// 第一次调用 currentIndex 为 0if (Math.random() > 0.5) {  useState('first')}// 第二次调用 currentIndex 为 1useState('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>  )}复制代码

结果是这样:

chaos

破解限制

有没有办法破解限制呢?

假如要破解全局索引递增导致的 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 的结构。

改造源码

来试着改造一下 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 currentIndexexport 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 (    <div>      <button onClick={() => setValue(value + 1)}>+</button>      {value}    </div>  );}复制代码

ok

自动编译

事实上 React 团队也考虑过给每次调用加一个 key 值的设计,在 Dan Abramov 的 为什么顺序调用对 React Hooks 很重要? 中已经详细解释过这个提案。

多重的缺陷导致这个提案被否决了,尤其是在遇到自己设置 Hook 的时候,比方你提取了一个 useFormInput

const valueKey = Symbol();function useFormInput() {  const [value, setValue] = useState(valueKey);  return {    value,    onChange(e) {      setValue(e.target.value);    },  };}复制代码

而后在组件中屡次调用它:

function Form() {  // 使用 Symbol  const name = useFormInput();   // 又一次使用了同一个 Symbol  const surname = useFormInput();   // ...  return (    <>      <input {...name} />      <input {...surname} />      {/* ... */}    </>      )}复制代码

此时这个通过 key 寻觅 Hook state 的方式就会发生冲突。

但我的想法是,能不能借助 babel 插件的编译能力,实现编译期自动为每一次 Hook 调用都注入一个 key, 伪代码如下:

traverse(node) {  if (isReactHookInvoking(node)) {    addFunctionParameter(node, getUniqKey(node))  }}复制代码

生成这样的代码:

function Form() {+  const name = useFormInput('key_1'); +  const surname = useFormInput('key_2');   // ...  return (    <>      <input {...name} />      <input {...surname} />      {/* ... */}    </>      )}+ function useFormInput(key) {+  const [value, setValue] = useState(key);  return {    value,    onChange(e) {      setValue(e.target.value);    },  };}复制代码

key 的生成策略可以是随机值,也可以是注入一个 Symbol,这个无所谓,保证运行时期不会改变就可。也许有少量我没有考虑周到的地方,对此有任何想法的同学都欢迎加我微信 sshsunlight 探讨,当然单纯的交个朋友也没问题,大佬或者者萌新都欢迎。

总结

本文只是一篇探究性质的文章:

  • 详情 Hook 实现的大概原理以及限制
  • 探究出修改源码机制绕过限制的方法

其实本意是帮助大家更好的了解 Hook

我并不希望 React 取消掉这些限制,我觉得这也是设计的取舍。

假如任何子函数,任何条件表达式中都可以调用 Hook,代码也会变得更加难以了解和维护

假如你真的希望更加灵活的使用相似的 Hook 能力,Vue3 底层响应式收集依赖的原理即可以完美的绕过这些限制,但更加灵活的同时也肯定会无法避免的添加更多维护风险。

感谢大家

我是 ssh,目前就职于字节跳动的 Web Infra 团队,目前团队在北上广深杭都还缺人(尤其是北京)。

为此我组建了一个氛围特别好的招聘社群,大家在里面尽情的探讨面试相关的想法和问题,也欢迎你加入,随时投递简历给我。

理解更多加入我们前台学习圈

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 我打破了 React Hook 必需按顺序、不能在条件语句中调用的枷锁

发表回复