元素是构成React应用的最小单位。
元素是用来描述你在屏幕上看到的内容,可以近似的理解为就是html的标签。
React元素与浏览器的DOM元素是不同的,React元素可以认为就是普通的JavaScript对象。ReactDOM对React元素进行渲染,确保浏览器DOM的数据内容与React元素保持一致。
元素渲染到DOM中
React进行元素渲染的时候,会首先选择一个<div>标签,所有渲染的内容都让在这个<div>标签内部。这些渲染的内容是由React DOM来管理的。所以这个<div>标签我们称之为根DOM。
对React元素进行渲染,并把渲染结果放入根DOM中,如果需要完成这个工作,需要把需要渲染的元素传递给ReactDOM.render()方法。
如在一个html页面中有如下标签
<div id="root"> </div>
则对元素渲染是,需要如下:
const element = <h1>hello world!</h1>
ReactDOM.render(
element, document.getElementById('root')
);
那么在html页面中就会出现hello world!
的h1标题文本。
更新渲染元素
React元素是不可变的,一旦创建,其内容和属性是不能被改变的。如同一个动画中的一帧,其内容和属性是代表的在某个时间点的画面,所以是不可变的。
React只会更新必要的部分
如上文所说,React元素是不可变的,但是每次调用渲染函数的时候,及时是不同的元素,ReactDOM都会比较元素内容前后的不同。如果需要更新,ReactDOM只会更新改变了的部分。
也就是即使每秒去调用一个函数,函数中创建了一个React元素,元素的内容分两部分,一部分是固定的,一部分是随时间改变的,那么ReactDOM也只是渲染随时间改变的之一部分。具体例子可参考。