React版本：15.4.2
**翻译：xiyoki **
元素是React应用程序最小的构建块。
元素描述了你想在屏幕上看到什么：
const element = <h1>Hello, world</h1>;
与浏览器DOM元素不同，React元素是纯对象，创建起来很廉价。React DOM 负责更新DOM，以匹配React元素。
注意：
人们可能将元素与更广为人知的‘组件’的概念混淆。我们将在下一节中介绍组件。元素是组件的构成部分。
Rendering an Element into the DOM（将元素渲染到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’。
Updating the Rendered Element（更新已渲染的元素）
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()。
注意：
在实践中，大多数React应用程序只调用一次ReactDOM.render()。在接下来的章节中，我们将学习如何将这样的代码封装成有状态的组件。
React Only Updates What's Necessary（React只更新所需的）
React DOM 将元素及其子元素与先前对应的元素进行比较，并且只在必要时更新DOM，以使DOM达到所需的状态。
你可以通过使用浏览器工具检查最后一个示例来验证：
即使我们在每个tick上创建一个描述整个UI树的元素，但只有内容改变的文本节点才被React DOM 更新。
根据我们的经验，思考UI在任何给定的时刻应该的样子，而不是考虑如何随着时间变化去改变它以消除某类bug。
网友评论