Fre2 RFC: Efffect list
source link: https://zhuanlan.zhihu.com/p/349007532
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Fre2 RFC: Efffect list
读过 react 源码都知道 effectlist 这颗神奇的链表，可以理解为被称为圣诞树（fiber树）上的一串彩灯
react16 最初痴迷链表，基本上所有的数据结构都使用链表去模拟，fiber，effectlist，tasklist，updatequeue，hooks……
最近有一个很火的库叫做 lindeddom，同样使用链表去描述 dom 树
越来越多地库作者开始意识到链表地好处，为此，我决定给 fre 再加一条链表
也就是大名鼎鼎地 effect list
why
大家都知道 fre2 使用了一个更加高效的 diff 算法，也就是从两端进行遍历，先进行预处理，再进行批处理，先移动再增删的一个算法
考虑这个用例
[ 1 2 3 4]
[ 1 3 2 4]它正确的操作 dom 的顺序应该是 [1 4 2 3]
而 fiber 链表的顺序是和新的 children 一样的，这会导致一些问题，所以我决定再引入一条链表，它的顺序是 diff 的正确顺序
why not array?
因为数组会爆栈
Any others？
我们引入 effect list 最主要的目的是扭曲 dom 操作的顺序，其次是解决爆栈问题
当然引入一个新的数据结构往往可能会带来一些遍历空间和优化机会
我们能不能借助 effect list 进行一些优化呢，比如使用从右到左的遍历方向来减少 dom 引用，比如通过 diff props 来跳过一些组件更新
再比如，借助链表的引用能力，实现 [父入子不入] 的调度机制
这一切的一切，都来自于一个新的数据结构的引入
trade off
值得一提的是，react 团队这两年似乎意识到链表不是万能的，已经开删了
然后 effectlist 就被删掉了，我的圣诞树木有彩灯了……
Delete remaining references to effect list by acdlite · Pull Request #20625 · facebook/react
react 团队没有给出解释，但我猜和 lane 有关，因为 lane 严重依赖树结构的父子关系
effectlist 就是个环状链表，可能并不合适
但是无论如何，这都是框架作者和团队做出的权衡，每个人都有不同的想法，并不能说 react 删了我就跟着删
最后放一下 fre 地址，fre2 代码还不够稳定，但源码可以读起来了
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK