# 渲染元素
元素是 React apps 中最小化的构建块。
一个元素描述了你希望在屏幕上看到的东西：
~~~
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 到一个已有的 app，可能有许多孤立的根 DOM 节点。
要渲染一个 React 元素到一个 根 DOM 节点，传递它们到 ReactDOM.render() 方法中：
~~~
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
~~~
它会在页面上显示 "Hello World" 。可以在[ CodePen 中](http://codepen.io/gaearon/pen/rrpgNB?editors=1010)打开看看。
## 更新一个渲染的 React 元素
React 元素是[不可变的](https://en.wikipedia.org/wiki/Immutable_object)。一旦你创建了一个元素，就不能再修改它的子元素或者属性。一个元素就像一个单独的电影中的帧：它表示在某个时间点的 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);
~~~
或者在 CodePen 中[打开它](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)。
它每秒都会从一个 setInterval() 的回调中调用 ReactDOM.render()。
> 注意：
在实际中，多数 React apps 只调用 ReactDOM.render() 一次。下一节我们将了解折衷代码如何封装到有状态的组件中。我们建议不要跳过话题，因为它们基于彼此。
## React 只更新需要更新的
ReactDOM 把元素和它的子元素跟之前的进行对比，只应用必须的 DOM 更新到 DOM 想要的状态。
你可以通过使用浏览器工具检查[最后的例子](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)来验证：
即使我们创建了一个元素在每个 tick 描述整个 UI 树，但是只有文本节点的内容被通过 ReactDOM 进行了更新修改。
在我们的经验中，思考 UI 在某个特定时刻应该是什么外观，而不是思考如何去修改它会消除一整个类型的 bugs 。
