元素是构成 React 应用的最小砖块,描述了你在屏幕上想看到的内容。
const element = <h1>Hello, world</h1>;
与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
假设你的 HTML 文件某处有一个 <div>
:
<div id="root"></div>
根节点,React应用只有单一根DOM节点
但一个html页面可以有多个React应用,每个应用对应一个独立根节点。
const el = <h1>Hello</h1>
ReactDOM.render(el, document.getElementById('root'))
React 元素是不可变对象 (opens new window)。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。
根据我们已有的知识,更新 UI 唯一的方式是创建一个全新的元素,并将其传入 ReactDOM.render()
(opens new window)。
考虑一个计时器的例子:
function tick() {
// element是一个React元素
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));}
setInterval(tick, 1000);
注意:在实践中,大多数 React 应用只会调用一次 ReactDOM.render()
(opens new window)。在下一个章节,我们将学习如何将这些代码封装到**有状态组件
(opens new window)**中。
上个例子中,尽管每一秒我们都会新建一个描述整个 UI 树的元素,但React DOM 只会更新实际改变了的内容。