react随记2 元素渲染

元素是构成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也只是渲染随时间改变的之一部分。具体例子可参考。