这是一个创建于 2460 天前的主题，其中的信息可能已经有所发展或是发生改变。
不知不觉已经是 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
|
Select Language