Elements是React应用的最小构建块。
一个element描述了你在屏幕上想看到的:
const element = <h1>Hello, world</h1>;
不像浏览器DOM中的elements，React elements是javascript中的简单对象，创建它们几乎没有效率损失。React DOM负责更新那些匹配React elements的DOM。
注解：
人们可能会将元素与更广为人知的'组件'概念相混淆。我们将在下节引入组件。组件是由Elements构建的，我们建议你不要跳过此节。
将一个Element渲染到DOM
我们假设你的HTML文件中存在一个<div>:
<div id="root"></div>
我们把它称为DOM根节点，因为它里面的所有节点都由React DOM管理。
仅由React构建的应用通常只有一个单独的DOM根节点。如果你打算将React整合到已存在的app中，你可以随意添加孤立的DOM根节点。
将React element和DOM根节点传递给ReactDOM.render()，就可以将React element渲染到DOM根节点:
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
在CodePen上试试
页面上将显示"Hello World"。
更新已渲染的Element
React elements是不可变的。element一旦创建好，就无法改变他的子孙和属性。一个element就如电影中的某一帧：他表示某个时间点上的UI。
根据现在学到的东西，创建一个新的element，并传给ReactDOM.render() 是更新UI的唯一方法。
看看下面这个计时时钟的例子：
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将element和它的子孙和之前的进行对比，只会进行必要的DOM更新，来使DOM达到预期的状态。
用浏览器工具查看上一个例子，可以验证这一说法。
即使每滴答一下，我们就创建一个新的element来描述整个UI树，也只有那个文本变化的文本节点得到更新，这都是React DOM的功劳。
以我们的经验来说，去思考UI在某时刻是如何表现的，而不是一段时间内UI该如何变化。这样可以消除一大堆的bugs。
