react文档 Rendering Elements

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。