元素是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')
);
它将在页面上显示"Hello, world"
更新已经被渲染的React元素
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);
它会每一秒调用一次ReactDOM.render()方法从一个setInterval()回调中。
注意：
在实践中，大多数React应用只调用ReactDOM.render()方法一次。在下一章节中，我们将会学习到如何把这些代码封装到组件中。
我们推荐你不要跳过任何章节，因为它们都是互相有联系的。
React只会在需要的时候更新
React DOM会把元素还有他的子节点与之前的那一个元素进行对比，并且只会在必要的时候申请更新DOM到想要的状态。
你可以在浏览器的开发者工具中对上一个例子进行核实。
尽管我们创建了一个元素来描述整个UI树在每一个瞬间应该是什么样子(Even though we create an element describing the whole UI tree on every tick)，只有内容中发生改变的文本节点被React DOM进行了更新操作。
根据我们的经验，思考在某一个时刻UI应该是什么样子而不是将它随着时间如何去改变去消除一大堆错误。(In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.)
网友评论