react学习(四)Element和虚拟DOM

标签：根据   book   nbsp   对比   ace   通过   需要   算法   对象   

参考：https://facebook.github.io/react/docs/rendering-elements.html

（一）Element

1.Element是react中最小的构建单元，是一个对象不是DOM，创建的代价比较低。

（1）通常我们在代码中使用JSX定义一个Element：

        const element = <h1>Hello, world</h1>;

（2）使用ReactDOM.render来渲染

        ReactDOM.render( element, document.getElementById(‘root‘) );

2.一旦一个Element被创建之后，是不可被改变的，它就像电影中的帧，如果要改变DOM的显示，只能新创建一个Element。

3.React会比较前后两个Element，只更新需要更新的内容。

（二）虚拟DOM

参考http://www.infoq.com/cn/articles/react-dom-diff

1.React并不是直接构建DOM元素的，而是通过创建与DOM结构类似的对象。然后根据这个结构，也就是React DOM来渲染真正的DOM。

2.当有改变的时候，新建对象，然后使之与之前的结构对比，记录下两者的差异，这里可以看下diff算法。

3.然后根据记录的差异更新DOM。

react学习(四)Element和虚拟DOM

标签：根据   book   nbsp   对比   ace   通过   需要   算法   对象   

原文地址：http://www.cnblogs.com/sheshihao/p/7220540.html