首页 > 代码库 > 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>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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。