三、渲染元素
React元素是React应用程序的最小构建结构。React元素描述了您想在屏幕上看到什么:
const element = <h1>hello world</h1>;
与浏览器DOM元素不同,React元素是纯对象,创建起来很方便。 React DOM负责匹配React元素并更新DOM。
note
人们可能将元素与更广为人知的“组件”概念混淆。 我们将在下一节中介绍组件。 元素是由什么组件组成的,我们建议您在向前跳过之前阅读此部分。
渲染元素到DOM中
假设您的HTML文件中有一个<div>
:
<div id="root"></div>
我们将其称为“root”DOM节点,接下来其中的所有内容将由React DOM来管理。
仅使用React构建的应用程序通常具有单个 root DOM节点。 如果你正在将React集成到现有的应用程序中,则可以创建尽可能多单独的 root DOM节点。
要将React元素渲染到 root DOM节点,可以将它们都传递给ReactDOM.render()
方法:
import React from 'react';
import ReactDOM from 'react-dom';
const element = <h1>hello world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
更新渲染元素
React元素是不可变的。 创建元素后,您不能更改其子元素或属性。
React元素就像电影中的单个帧:它表示某个时间点的UI。
到目前为止,以我们的知识,更新UI的唯一方法是创建一个新的元素,并将其传递给ReactDOM.render()
。
考虑这个滴答时钟示例:
import React from 'react';
import ReactDOM from 'react-dom';
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 DOM将元素及其子元素的内容与该元素变化之前的内容进行比较,并仅进行DOM更新以使DOM达到所需的状态。
您可以通过使用浏览器工具检查最后一个示例来验证。
即使我们在每个tick上创建一个描述整个UI树的元素,只有内容发生改变的文本节点才被React DOM更新。
在我们的经验中,思考UI应该如何更新给定的时间,而不是随着时间的更改去修改整体的内容(DOM比较,按需更新)。