浅谈ReactJS中的虚拟DOM

1. 虚拟DOM本质

很多初学React的同学可能会对其中的一个概念感到很懵逼啊，那就是虚拟DOM，确实，当初我也是对这个概念感到很陌生啊，感觉这个概念很高大上，但是接触了之后才知道，其实就是一个js对象啊，只不过因为这是React底层的东西，所以就显得逼格很高，其实也就那么回事儿。

2. 虚拟DOM作用

说起虚拟DOM的作用就不得不提React中视图更新的原理，React中视图更新的原理就是当state或者props发生改变时，会自动调用render函数，而这个函数在执行的过程中会执行几个步骤：
1：生成虚拟DOM对象，用来描述真实的DOM，其结构大致就是：

    //虚拟DOM对象结构
    let virtualObject = {
        tagName:'div',
        property：{
            id: 'id'
        },
        content:'hello ReactJs'
    }

2：用刚刚生成的虚拟DOM对象通过和组件初始化时生成的虚拟DOM对象来进行比较，找到区别。

3：根据找到区别来更新DOM，改变不一样的地方。

以上三点就是当state或者props发生改变时会自动更新视图的步骤，虚拟DOM的作用就是避免了每次数据发生变化时都会创建一个新的真实DOM元素以及真实DOM之间的比较，因为真实DOM的操作是非常的耗费性能的，而操作js对象确是不怎么消耗性能，说到底虚拟DOM作用就是用虚拟DOM来代替真实DOM的很多操作以此来提高性能。

下面是React从初始渲染到数据更新渲染的步骤

本人React小白，也是正在学习的小兵，如有不对的地方，往给位大神指教。