不知不觉已经是 2018 年了,从接触 React 开始也两年了,但是一直没有勇气深入研究源码。
然而去年有幸拿到了 FB 的实习,所以给了自己一个强迫去学习的理由。一个月硬读下来,感觉还是很有收获的。
学习过程中边写博客边重复造轮子,写了两个项目。
第一个是 learn-react-source-code,是我在 Paul 2016 年 React Rally Talk 上的 build react from scratch 的基础上做了一部分简化、改进后写的一个项目,同时我也(很认真地)写了 6 篇博客,讲了一下我对核心部分的理解。
第二个是 v-dom,用不到 200 行代码实现了一个 Virtual DOM。Virtual DOM 这个名字让我一开始望而生畏,但是在真正学习理解之后,发现它其实就是一个非常简洁的映射思路。我相信只要有基本的 JS 基础,大家在一定时间内都能读懂这个项目的代码。
从很多朋友那里已经收到了对这两个项目还不错的评价,所以才斗胆来分享一下,祝大家读完有所收获。
同时也宣传一下自己在知乎的专栏
求个 Star。
以上。
1
TabGre 2018-03-25 06:33:41 +08:00 via iPhone 1
厉害,跟进学习
|
2
hardman 2018-03-25 07:41:51 +08:00 via Android 1
了解学习下
|
3
xuanyuanaosheng 2018-03-25 08:06:36 +08:00 via Android
学习一下
|
4
binux 2018-03-25 08:23:52 +08:00
于是我每次在 ul 列表中,交替 prepend 一个 text node 一个 li,就能导致你的 v-dom 不断 replace 整个 ul 了吗?
|
5
thomasyim OP @binux 是的 minimal update。这一点你可以在每次 setState 的时候看审查元素,只有“在变动”的元素在变化
|
6
xor 2018-03-25 09:05:30 +08:00 via iPhone
minimum update 需要 tree diff 算法,光这个算法就不只 200 行了吧
|
7
binux 2018-03-25 09:16:19 +08:00
@thomasyim 本来只要在 ul 里 prepend 一个元素就可以了,你现在把整个 ul 都重建了,这也叫 minimal update ?
|
8
lance6716276 2018-03-25 10:06:35 +08:00 via Android
老哥啊,你还上 v2ex
|
9
qiuyk 2018-03-25 10:54:37 +08:00
之前我闲的蛋疼也写了一个 23333 https://github.com/Siubaak/kut
|
10
qiuyk 2018-03-25 11:05:27 +08:00
@binux 个人觉得其实算是 react 一个没做好的地方(当然楼主的做法参考了 react ),就是十分不建议在列表头部插入一个元素,会引起之前所有节点的移动。
|
12
qiuyk 2018-03-25 12:19:49 +08:00
@ahonn 知道的 你可以先看下这篇文章 https://zhuanlan.zhihu.com/p/20346379 react 的做法我叫前向 diff 我自己实现加入了后向 diff 并取前向 diff 和后向 diff 的 patches 较小值来更新节点 就不会有这个问题
|
14
thomasyim OP @lance6716276 哈哈哈哈哈哈哈
|
15
thomasyim OP @lance6716276 哈哈哈哈哈哈哈是你
|
18
thomasyim OP @binux 麻烦你自己好好读代码 再不然就 console 一下再来说好吗? element type 不变的话 是不会进那个 flow 的
|
20
thomasyim OP @binux 不好意思之前没理解你说的什么意思。你说的这个问题即使是在 React 也确实是存在的,直接去看 [React Reconcilliation]( https://reactjs.org/docs/reconciliation.html) 就会有答案。这也是 @qiuyk 上面评论里说的问题。从这个意义上来说 确实不是 minimal update
|