duuliy

关于hooks的顺序思考

2021-3-12

前景:

去年年底公司开始写hooks,当时写到一个比较复杂的弹框组件,基于当时环境吧没有eslint,没意识到多层嵌套还有分支判断下用了hooks,16.14.0版本的错误提示可坑苦了我 https://github.com/facebook/react/issues/20674。17就好了很多,所以
开始了这方面的关注。

正文:

众所周知,react规定只能在顶层调用 Hook,不要在循环,if条件或嵌套函数中调用 Hook。
原因是hooks钩子的结构是个有顺序的链表放在fiber节点上的memoizedState属性,有顺序改变会造成游标错乱。
那么如果每个hooks都有唯一的key值,而不是依赖顺序?

内部生成唯一key?

无法保证每次更新编译的hooks对用的上,如果一开始取if的true里面的hooks得到唯一key,下次更新if的false的hooks能得到唯一值,但是怎么在本次alternate找到上一次的唯一key呢?自定义hooks,多次调用的唯一key怎么解决呢?

手输入唯一key?

被否了很多方案 (https://overreacted.io/zh-hans/why-do-hooks-rely-on-call-order/ )什么
用户输入key、Symbol()等等

无侵入性,如果我在babel编译期间动态注入呢改变react的这个问题?

初始化:

function useState(initial) {
  ...
  hook={
    key:'唯一id'
  }
  ...

  wipFiber.hooks.push(hook);
  hookIndex++;
  return [hook.state, setState];
}

但是如何保证每次update的key都一样呢?

//每次更新都取上一次的key
  this.alternate = {
    ...,
    oldHooksKey
  }

思路是有的,但是实现上,如果依赖了自定义hooks的库,怎么编译?除非都走这个编译流程? 😂