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。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。