Rendering Elements - 渲染元素 元素是React应用的最小构建块 一个元素描述了你想要在屏幕上看到的内容：
const element = <h1>Hello, world</h1>;
不同于浏览器的DOM元素，React元素是普通对象，而且易于创建。React DOM很小心将React元素更新为匹配的DOM对象。
注意：
人们可能将元素与一个广为人知的概念"组件"混淆。在下一节我们将介绍组件。元素是组件的组成部分，在跳跃着阅读时，我们鼓励你阅读本节。
Rendering an Element into the DOM - 渲染一个元素为DOM
在你的HTML文件某处，有一个 '<div>'：
<div id="root"></div>
我们称这个为一个 'root' DOM节点，因为在它内部的任何内容，都将会被 'React DOM' 来管理。
只通过React构建的应用，经常有一个单个的根DOM节点。如果你正在将React和一个已经存在的应用相融合，你可以设置多个孤立的根DOM节点。
为了渲染一个React元素到一个根DOM节点，将2者都传递给 'ReactDOM.rend()'：
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 Data().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root');
);
}
setInterval(tick, 1000);
利用 setInterval() 的回调函数，每秒调用 'ReactDOM.rend()' 一次。
注意：
实际上，大多数React应用仅仅调用 'ReactDOM.rend()' 一次。在下个章节我们将学习如何将这样的代码封装到有状态的组件中。
我们推荐你不要跳过这些主题，因为它们相互关联。
React Only Updates What's Necessary - React仅执行必需的更新
React DOM 将元素和它的子与之前的元素和子进行比较，仅更新必需更新的地方，来让DOM达到它期望的状态。
你可以通过使用浏览器工具检查最后一个例子来核实。
这里是文档里的firebug动态截图。
即使在每秒，我们创建了一个元素，来描述整个UI树，也仅仅只有内部的文本节点通过React DOM被更新。
以我们的经验，思考任何给定时刻UI应该看起来像什么，而不是随着时间它是如何改变的，消除了一整类型的bug。(这就是React真正的内在)
转载请注明原文地址: https://ju.6miu.com/read-676741.html
