第三节——渲染元素

元素是React应用的最小构建块。

一个元素描述了你想要在屏幕上看到什么：

const element = <h1>Hello, world</h1>;

与浏览器DOM元素不同，React元素是纯对象，并且创建的代价很小。React DOM负责更新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')
);

它将在页面上显示"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);

它会每一秒调用一次ReactDOM.render()方法从一个setInterval()回调中。

注意：
在实践中，大多数React应用只调用ReactDOM.render()方法一次。在下一章节中，我们将会学习到如何把这些代码封装到组件中。
我们推荐你不要跳过任何章节，因为它们都是互相有联系的。

React只会在需要的时候更新

React DOM会把元素还有他的子节点与之前的那一个元素进行对比，并且只会在必要的时候申请更新DOM到想要的状态。

你可以在浏览器的开发者工具中对上一个例子进行核实。

尽管我们创建了一个元素来描述整个UI树在每一个瞬间应该是什么样子(Even though we create an element describing the whole UI tree on every tick)，只有内容中发生改变的文本节点被React DOM进行了更新操作。

根据我们的经验，思考在某一个时刻UI应该是什么样子而不是将它随着时间如何去改变去消除一大堆错误。(In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.)

第三节——渲染元素

注意：

将一个元素渲染到DOM中

更新已经被渲染的React元素

React只会在需要的时候更新

推荐阅读更多精彩内容