【React进阶系列】从零开始手把手教你实现一个Virtual DOM（一）

PumpkinDylan 发布于2019-08-22 16:40 / 2660人阅读

摘要：可实际上并不是创造的，将这个概念拿过来以后融会贯通慢慢地成为目前前端最炙手可热的框架之一。则是将再抽象一层生成的简化版对象，这个对象也拥有上的一些属性，比如等，但它是完全脱离于浏览器而存在的。所以今天我要手把手教大家怎么从零开始实现。

假如你的项目使用了React，你知道怎么做性能优化吗？
你知道为什么React让你写shouldComponentUpdate或者React.PureComponent吗？
你知道为什么React让你写Immutable Data Structures吗？
你知道为什么React让你在渲染列表时，一定要给每个子项加一个key吗？
你知道为什么React让你在条件渲染时，不写if而写&&操作符或三元操作符吗？

一切的答案都在Virtual DOM上！
只要你跟着我完成了这个手写Virtual DOM的系列，上面的所有问题你都将得到解答，从此进入react高手的阵营！

现在当我们谈virtual DOM (VDOM)的时候，通常会将React捆绑在一起谈。可实际上VDOM并不是React创造的，React将这个概念拿过来以后融会贯通慢慢地成为目前前端最炙手可热的框架之一。

什么是VDOM？

首先我们都知道什么是DOM(Document Object Model)，简单说就是将一个HTML文档抽象表达为树结构。VDOM则是将DOM再抽象一层生成的简化版js对象，这个对象也拥有DOM上的一些属性，比如id, class等，但它是完全脱离于浏览器而存在的。

为什么要用VDOM？

随着前端技术的发展，现在的网页应用变得越来越庞大，DOM树也随之变得复杂。当我们要修改DOM的某个元素时，我们需要先遍历找个这个元素，然后才修改能修改。而且如果我们大量地去修改DOM，每次DOM修改浏览器就得重绘（repaint）页面，有的时候甚至还得重排(reflow)页面，浏览器的重排重绘是很损耗性能的。

React是怎么用VDOM解决这个问题的呢？

首先，在React当我们要去修改数据的时候，我们会调用React提供的setState方法来修改数据；

React根据新的数据生成一个新的VDOM，因为VDOM本质上只是一个普通的js对象，所以这个过程是很快的；

然后React拿着新生成VDOM和之前的VDOM进行对比（diff算法），找出不同的地方(新增，删除，修改)，生成一个个的补丁（patches）;

最后React把这些补丁一次性打到DOM上，完成视图的修改。

原理其实还是很直观的，但React到底是怎么用代码实现的呢？其中最关键的一步是React是怎么diff的？如果搞清楚了内部的实现原理，对于我们使用React来写出性能更高的代码至关重要。所以今天我要手把手教大家怎么从零开始实现VDOM。

我们的设计蓝图

我们将采用跟React类似的方式

使用JSX来编写组件；

用Babel将JSX转化为纯js(类似hyperscript)；

将hyperscript转化成我们的VDOM；

将VDOM渲染到页面，形成真实的DOM；

手动更新数据并手动触发更新视图操作(这部分是react做的，跟VDOM的实现无关，所以我们手动模拟一下)；

重复步骤二和步骤三，得到新的VDOM；

diff新VDOM和旧VDOM，得到需要修改真实DOM的patches；

把patches一次性打到DOM上，只更新DOM上需要更改的地方。

下面我们开始正式进入写代码环节，建议大家打开编辑器跟着我一步一步的敲代码。这样手把手教你敲代码的的博主你去哪里找？还不抓住这个千载难逢的机会？???

项目结构

index.html

index.js(所有的逻辑都写在这个文件里)

.babelrc（babel的配置页）

package.json

compiled.js (这个文件是babel打包自己生成的，不需要自己写)

大家可以新建一个目录，然后新建1-4这四个文件

从零开始手把手教你实现一个Virtual DOM（二）

云服务器 GPU云服务器手把手教你做图像识别手把手教你阿里云服务器搭建商城 virtual-dom 从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94560.html

【React进阶系列】从零开始手把手教你实现一个Virtual DOM（二）

摘要：上集回顾从零开始手把手教你实现一个一上一集我们介绍了什么是，为什么要用，以及我们要怎样来实现一个。完成后，在命令行中输入安装下依赖。最后返回这个目标节点。明天，我们迎接挑战，开始处理数据变动引起的重新渲染，我们要如何新旧，生成补丁，修改。上集回顾从零开始手把手教你实现一个Virtual DOM（一）上一集我们介绍了什么是VDOM，为什么要用VDOM，以及我们要怎样来实现一个VDOM...

dendoink 2019-08-22 16:43 评论0 收藏0
【React进阶系列】从零开始手把手教你实现一个Virtual DOM（三）

摘要：函数依次做了这几件事调用函数，对比新旧两个，根据两者的不同得到需要修改的补丁将补丁到真实上当计数器小于等于的时候，将加，再继续下一次当计数器大于的时候，结束下面我们来实现函数和函数。上集回顾【React进阶系列】从零开始手把手教你实现一个Virtual DOM（二）上集我们实现了首次渲染从JSX=>Hyperscript=>VDOM=>DOM的过程，今天我们来看一下当数据变动的时...

qqlcbb 2019-08-22 16:49 评论0 收藏0
Vue.js最佳实践（五招让你成为Vue.js大师）

摘要：但如果你想更加高效地使用来开发，成为大师，那下面我要传授的这五招你一定得认真学习一下了。虽然损失了一丢丢性能，但避免了无限的。所以我们需要设置，这些默认行为将会被去掉以上两点的优化才能成功。陆续可能还会更新一些别的招数，敬请期待。本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。对大部分人来说，掌握Vue.j...

CocoaChina 2019-08-22 15:52 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0