React核心概念:渲染元素
引言
元素是React App中最小的构建块
元素描述了你在屏幕上看到的图形界面
const element = <h1>Hello, world</h1>;
不想浏览器的DOM元素,React元素是便于构建的普通对象。React DOM负责更新DOM以匹配React元素。
提示:
有人可能会把React元素和更广为人知的组件混淆,但要注意的是组件是由元素构成的。组件将在下一节讲解,这里建议先看完元素在进行下一步的学习。
将元素渲染进DOM
让我们设想一下在你的HTML文件中有一个<div>
<div id="root"></div>
因为在标签内部的所有元素都由React DOM管理,所以我们将这个<div>
标签称作根节点。
使用React构建的应用通常有一个单独的根DOM节点。但如果您要在现有的应用中集成React,那么您可以按照需求构建许多独立的DOM根节点。
想要将React元素渲染进根DOM节点,则需要将这两者作为参数传递给ReactDOM.render()
方法
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
上述代码将会在屏幕上展示Hello, world。
更新React元素
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);
这段代码使用setInterval()
设置了每秒调用ReactDOM.render()
更新UI
提示:
在实践中,大部分React应用只调用ReactDOM.render()
一次。在下节内容中我们将会讲述如何将这样的代码封装进组件中。
React只更新必要的内容
ReactDOM会将当前元素(包括子元素)与更新之前的元素作比较并且只更新能将DOM带入期望状态的那部分元素。
您可以通过浏览器来观察上一段代码的更新过程。
即使我们创建的元素是描述整个时钟的,但也只有时间内容被React DOM更新了。
根据我们的经验,考虑UI在任意时刻的状态而不是考虑随着时间变化的过程,可以消除一整类的bug。