渲染元素
元素是 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')
);
在CodePen试试。
它会在页面上显示“Hello World”。
更新渲染的元素
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);
在CodePen上试试。
它从setInterval()回调函数中，每隔一秒调用一次ReactDOM.render()。
注意：
在实践中，大多数 React 应用仅调用一次
ReactDOM.render()。在接下来的部分我们将会学习怎样将这样的代码封装到状态组件中。我们推荐你不要跳过这些话题，因为它们之间彼此依赖。
React 仅按需更新
React DOM 把元素及其子元素和之前的做比较，然后仅按需更新 DOM，使DOM 达到所期望的状态。
你可以通过使用浏览器工具检查上一个例子来验证。
即使我们在每一秒创建一个元素描述整个 UI 树，只有内容发生变化的文本节点被 React DOM 更新。
根据我们的经验，我们应该考虑UI在任何一个时间点如何展现，而不是如何消除在这个变化过程的一系列的bug。
下一步
组件和Props
