[译]React核心概念2：渲染元素

原文连接：reactjs.org/docs/render…

引言

元素是React App中最小的构建块

元素描述了你在屏幕上看到的图形界面

const element = <h1>Hello, world</h1>;
复制代码

不想浏览器的DOM元素，React元素是便于构建的普通对象。React DOM负责更新DOM以匹配React元素。

提示： 有人可能会把React元素和更广为人知的组件混淆，但要注意的是组件是由元素构成的。组件将在下一节讲解，这里建议先看完元素在进行下一步的学习。

将元素渲染进DOM

让咱们设想一下在你的HTML文件中有一个<div>

<div id="root"></div>
复制代码

由于在标签内部的全部元素都由React DOM管理，因此咱们将这个<div>标签称做根节点。

使用React构建的应用一般有一个单独的根DOM节点。但若是您要在现有的应用中集成React，那么您能够按照需求构建许多独立的DOM根节点。

想要将React元素渲染进根DOM节点，则须要将这二者做为参数传递给ReactDOM.render()方法

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

上述代码将会在屏幕上展现Hello, world。

更新React元素

React元素是不可变对象。您一旦建立了一个元素，就不能更改它的子元素或者属性。元素就好像是一帧电影画面表明了应用在某一个特定时间点的UI。

根据咱们已有的知识，更新UI的惟一办法就是建立新的元素并经过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()更新UI

提示： 在实践中，大部分React应用只调用ReactDOM.render()一次。在下节内容中咱们将会讲述如何将这样的代码封装进组件中。

React只更新必要的内容

ReactDOM会将当前元素（包括子元素）与更新以前的元素做比较而且只更新能将DOM带入指望状态的那部分元素。

您能够经过浏览器来观察上一段代码的更新过程。

即便咱们建立的元素是描述整个时钟的，但也只有时间内容被React DOM更新了。

根据咱们的经验，考虑UI在任意时刻的状态而不是考虑随着时间变化的过程，能够消除一整类的bug。