首页 > 代码库 > react学习(四)Element和虚拟DOM

react学习(四)Element和虚拟DOM

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

(一)Element

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

(1)通常我们在代码中使用JSX定义一个Element:

        const element <h1>Helloworld</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