©
本文檔使用 php中文網手册 發布
元素是 React 应用程序的最小构建块。
一个元素描述了你想在屏幕上看到的内容：
const element = <h1>Hello, world</h1>;
与浏览器 DOM 元素不同，React 元素是普通对象，创建起来很便宜。React DOM 负责更新 DOM 以匹配 React 元素。
注意： 人们可能会将元素与更广为人知的“组件”概念混为一谈。我们将在下一部分介绍组件。元素是什么组成部分“由”组成，我们鼓励您在跳跃前阅读本节。
假设<div>您的 HTML 文件中存在某个地方：
<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 的唯一方法是创建一个新元素并将其传递给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 DOM 将元素及其子元素与前一元素进行比较，并仅应用必要的 DOM 更新以使 DOM 达到所需的状态。
您可以通过使用浏览器工具检查最后一个示例来进行验证：
即使我们创建了一个元素来描述整个 UI 树，但只有内容已更改的文本节点才会被 React DOM 更新。
根据我们的经验，思考如何在任何特定时刻看到 UI，而不是随着时间的推移如何改变，从而消除了一整类错误。