## 前言 本文节选《react全栈》虚拟dom部分，适合react还在入门阶段的读者。 建议阅读时间：20-30min。 ## dom理解 Dom称为文档对象模型，相信大家都看过一本js Dom编程艺术，会把文档转为树类型的数据结构，称为dom tree .每一片树叶被称为节点，浏览器会提供给一系列的api给js，让他有可以操作dom的能力。 ## 引入虚拟dom的缘由 由于spa项目越来越多，导致dom结构会越来越复杂，因为会有越来越多的封装组件出来，很多时候开发者觉得很简单的一个下拉框实际可能由原生的一个select演变成了至少10个标签，为了支持它的样式以及复杂功能，而在这部分变得大量使用的时候，会产生的量的非常规的基于整体页面的悬浮dom,根据offset去定位，在这些元素的变化、功能支持的时候会导致大量的回流，从而影响性能 ### 虚拟元素 虚拟元素并不是属于react的部分，其是属于与react搭配的技术栈，基于的原点是原生的dom结构表示很复杂，包含非常多的api方法，而这些我们可以通过js的数据结构部分来控制，能够表述的非常简单，而且可以通过对数据结构的分析来避免某些低效的dom操作变化。 在虚拟元素完成diff之后，会把确定的虚拟元素渲染到最终的dom视图上。Dom结构是这样的 : ~~~ var element ={ tagName :’div’, attr:{ props:{ id:’', index:'' }, styles:{ color:red; font-size:12px }, }, children :{ // codes like the upper codes } } ~~~ 用构造函数模拟一下 ~~~ function Element (tagname,attr,children){ this.tagName = tagname this.props= props this.children =children } var headline = new Element("h1",null,’hello world') var div=new Element(‘div’,{ props :{ id:"container" }, style:{ color:"red" } },headline) ~~~ 你觉得和jsx的写法很相似对吧 ，jsx转换之后真正调用的api: Let app = React.creatElement(“div”,{id:’container’,styles:{color:red}},headline) ~~~ //jsx写法 let styles = { color:red } let app = <div id=“container” styles={styles}> <h1></h1></div> ~~~ 从上面的例子可以看出jsx是一种reactElement的便捷写法 ，reactElement 是什么？ 它是一种轻量级、无状态的 不可改变的 dom元素的虚拟表述,其实就是一个js对象表示dom元素而已。我们自己创建的elemen对象和reactElement 看起来是差不多的,而将 ReacElement 插入真正的dom结构需要render方法.