React---(元素渲染)

元素就是在页面上所看到的内容，和浏览器的DOM不同，React元素是创建开销极其小的对象，React会更新DOM来和页面的React元素保持一致！

将一个元素渲染称DOM

假设你的 HTML 文件某处有一个 <div>:

<div id="root"></div>

这个称之为“根”DOM节点，因为该节点的所有内容都由React DOM进行管理。

通常React只有一个“根”DOM节点，当你把React集成进一个已有应用的项目里，就可以在应用中有多个独立的“根”DOM节点。

如果想把React元素渲染到DOM节点里，就采用ReactDOM.render()：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

更新已渲染的元素

React元素是不可变的，一经创建将无法修改。

所以如果需要更改元素，必须重新创建，并将其传入ReactDOM.render()。

一个计时器的例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

这个例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()。

React 只更新它需要更新的部分

React会将元素和它的子元素之前的状态作比较，只会更新需要更新的部分。

尽管每一秒，都创建了描述整个UI树元素，但是只更新了实际更改的内容，也就是图中的时间（文本节点）。