关于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的库,怎么编译?除非都走这个编译流程? 😂