02. 元素渲染

元素是构成 React 应用的最小砖块，描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

将一个元素渲染为 DOM

假设你的 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 唯一的方式是创建一个全新的元素，并将其传入 root.render()。

考虑一个计时器的例子：

function tick() {
  // element是一个React元素
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  const root = ReactDOM.createRoot(
  	document.getElementById('root')
  );  
  root.render(element)

setInterval(tick, 1000);

注意：在实践中，大多数 React 应用只会调用一次 root.render()。在下一个章节，我们将学习如何将这些代码封装到**有状态组件 (opens new window)**中。

React 只更新它需要更新的部分

上个例子中，尽管每一秒我们都会新建一个描述整个 UI 树的元素，但React DOM 只会更新实际改变了的内容。

注意：react 18版本 已移除原 ReactDOM.render 方法，以 createRoot 代替。