React进阶篇——五、虚拟DOM

五、虚拟DOM

真实DOM是对结构化文本的抽象表达。在Web环境中，其实就是对HTML文本的一种抽象描述，每一个HTML元素对应一个DOM节点，HTML元素的层级关系也会体现在DOM节点的层级上，所有的这些DOM节点构成一棵DOM树。

操作DOM会引起重排和重绘，过程耗时，所以尽量减少DOM操作。

软件开发中遇到的所有问题都可以通过增加一层抽象得以解决。虚拟DOM就是建立在真实DOM之上对真实DOM的抽象。

虚拟DOM使用普通的javascript对象来描述DOM元素。实际上React元素本身就是一个虚拟DOM节点，例如：

<div>
    <h1>Hello React</h1>
</div>

可以用这样的一个javascript对象表述：

        {
            type:'div',
            props: {
                className: 'foo',
                Children: {
                    type: 'h1',
                    props: {
                        children: 'Hello React'
                    }
                }
            }
        }

虚拟DOM只是用来描述真实DOM的JavaScript对象而已。