渲染元素

元素是 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')
);

在CodePen试试。

它会在页面上显示“Hello World”。

更新渲染的元素

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);

在CodePen上试试。

它从setInterval()回调函数中，每隔一秒调用一次ReactDOM.render()。

注意：

在实践中，大多数 React 应用仅调用一次ReactDOM.render()。在接下来的部分我们将会学习怎样将这样的代码封装到状态组件中。

我们推荐你不要跳过这些话题，因为它们之间彼此依赖。

React 仅按需更新

React DOM 把元素及其子元素和之前的做比较，然后仅按需更新 DOM，使DOM 达到所期望的状态。

你可以通过使用浏览器工具检查上一个例子来验证。

即使我们在每一秒创建一个元素描述整个 UI 树，只有内容发生变化的文本节点被 React DOM 更新。

根据我们的经验，我们应该考虑UI在任何一个时间点如何展现，而不是如何消除在这个变化过程的一系列的bug。

下一步

组件和Props