写了一个小白都能看懂的 Virtual DOM 实现

[thomasyim]

不知不觉已经是 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。

以上。

[TabGre]

厉害，跟进学习

[hardman]

了解学习下

[xuanyuanaosheng]

学习一下

[binux]

于是我每次在 ul 列表中，交替 prepend 一个 text node 一个 li，就能导致你的 v-dom 不断 replace 整个 ul 了吗？

[thomasyim]

@binux 是的 minimal update。这一点你可以在每次 setState 的时候看审查元素，只有“在变动”的元素在变化

[xor]

minimum update 需要 tree diff 算法，光这个算法就不只 200 行了吧

[binux]

@thomasyim 本来只要在 ul 里 prepend 一个元素就可以了，你现在把整个 ul 都重建了，这也叫 minimal update ？

[lance6716276]

老哥啊，你还上 v2ex

[qiuyk]

之前我闲的蛋疼也写了一个 23333 https://github.com/Siubaak/kut

[qiuyk]

@binux 个人觉得其实算是 react 一个没做好的地方（当然楼主的做法参考了 react ），就是十分不建议在列表头部插入一个元素，会引起之前所有节点的移动。

[ahonn]

@qiuyk #10 你知道列表项的 key 是干嘛用的么..

[qiuyk]

@ahonn 知道的 你可以先看下这篇文章 https://zhuanlan.zhihu.com/p/20346379 react 的做法我叫前向 diff 我自己实现加入了后向 diff 并取前向 diff 和后向 diff 的 patches 较小值来更新节点 就不会有这个问题

[thomasyim]

@binux 我并没有重新 mount 呀：）

[thomasyim]

@lance6716276 哈哈哈哈哈哈哈

[thomasyim]

@lance6716276 哈哈哈哈哈哈哈是你

[thomasyim]

@qiuyk 棒👍

[binux]

@thomasyim 你都 replace 了，还说没有

[thomasyim]

@binux 麻烦你自己好好读代码 再不然就 console 一下再来说好吗？ element type 不变的话 是不会进那个 flow 的

[binux]

@thomasyim 我都说了交替插入 text node 和 li

[thomasyim]

@binux 不好意思之前没理解你说的什么意思。你说的这个问题即使是在 React 也确实是存在的，直接去看 [React Reconcilliation]( https://reactjs.org/docs/reconciliation.html) 就会有答案。这也是 @qiuyk 上面评论里说的问题。从这个意义上来说 确实不是 minimal update