Rendering Elements

Elements(元素）是 React apps 最小的建筑构件。

element 描述你想要在屏幕上看到什么。

const element = <h1>Hello, world</h1>

不同于浏览器 DOM elements， React elements 是纯对象， 创建开销很小。 React DOM 负责更新 DOM 去匹配 React elements.

Plain Object(纯对象): 指的是通过字面量形式或者new Object()形式定义的对象。

Note:
一个更广为人知的概念 "components" 很容易和 "elements" 混淆。
下一部分我们介绍 components(组件）。component由elements 制造，我们建议不要跳过这部分。

把 element 渲染至 DOM

假定你的 HTML 文件中有一个 <div>

<div id="root"></div>

我们称其为根节点(root DOM node)，它内部的所有都由 ReactDOM 来管理。

仅由 React 创建的应用通常只有单独一个根节点。如果把 React 整合进一个已存在的应用，可以有任意多个独立的根节点。

将 React element 渲染至根节点，将两者传递给 ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById("root"));

在线尝试
页面会显示 "Hello, world"

更新已渲染的 element

React elements 是不可变对象。一旦你创建一个 element，你不可以改变它的子节点和属性。一个 element 就像电影中的一帧：它在特定时间点呈现 UI。

以目前所知，创建一个新的 element 传递给 ReactDOM.render()是更新 UI 的唯一办法。

思考如下时钟的例子：

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() 。

Note:
实践中，多数 React 应用只调用一次 ReactDOM.render()。
下一部分我们学习如何将代码封装到一个 状态组件中。
我们建议不要跳过主题，因为他们彼此依赖。

React 仅仅更新必要部分

React DOM 与原有元素和他的子节点比较，仅进行必要的节点更新获取期望的 DOM 状态。

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

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

根据我们的经验，考虑 UI 在每个时刻显示样子而不是如何随时间改变它的理念可以消弭很多bug。