元素就是在页面上所看到的内容,和浏览器的DOM不同,React元素是创建开销极其小的对象,React会更新DOM来和页面的React元素保持一致!
将一个元素渲染称DOM
假设你的 HTML 文件某处有一个 <div>:
<div id="root"></div>
这个称之为“根”DOM节点,因为该节点的所有内容都由React DOM进行管理。
通常React只有一个“根”DOM节点,当你把React集成进一个已有应用的项目里,就可以在应用中有多个独立的“根”DOM节点。
如果想把React元素渲染到DOM节点里,就采用ReactDOM.render()
:
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
更新已渲染的元素
React元素是不可变的,一经创建将无法修改。
所以如果需要更改元素,必须重新创建,并将其传入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()
。
React 只更新它需要更新的部分
React会将元素和它的子元素之前的状态作比较,只会更新需要更新的部分。
尽管每一秒,都创建了描述整个UI树元素,但是只更新了实际更改的内容,也就是图中的时间(文本节点)。