React 元素渲染

React 的核心思想是"用元素描述界面，界面随数据自动更新"。本节讲解什么是 React 元素，以及如何把元素渲染到页面中，这是理解后续组件、状态的基础。

什么是 React 元素

React 元素是描述"屏幕上该显示什么"的最小单位，它其实是一个普通的 JavaScript 对象。用 JSX 写出来的标签，编译后就是一个元素：

const element = <h1>你好，React</h1>;

element 并不直接对应页面上的 DOM 节点，它只是对内容的描述，真正的 DOM 由 React 负责创建和更新。

将元素渲染到页面

页面需要先有一个挂载点（一般是一个 div），再用 createRoot 创建根并调用 render：

import { createRoot } from 'react-dom/client';

const element = <h1>元素渲染示例</h1>;
const root = createRoot(document.getElementById('root'));
root.render(element);

渲染效果：页面中 id 为 root 的位置显示大标题"元素渲染示例"。

挂载点通常在 index.html 里预先定义好：

<div id="root"></div>

更新已渲染的元素

React 元素是不可变的：创建之后，你不能修改它的属性或内容。想更新界面，只能重新创建一个新元素，再交给 render。下面这个时钟每秒渲染一次当前时间：

import { createRoot } from 'react-dom/client';

function tick() {
  const element = (
    <div>
      <h2>现在时间：{new Date().toLocaleTimeString()}</h2>
    </div>
  );
  root.render(element);
}

const root = createRoot(document.getElementById('root'));
setInterval(tick, 1000);

渲染效果：页面每秒更新一次，持续显示最新时间。

React 只更新必要部分

每秒钟都在调用 root.render，浏览器性能会不会很糟？不会。React 会把新元素与上一次的元素做对比，只更新真正变化的部分。上面的时钟里，只有时间文字在变，h2 标签本身不会被重复创建，因此非常高效。

元素与组件的区别

初学者容易混淆这两个概念：

概念	说明	例子
元素	描述界面内容的最小对象	<h1>标题</h1>
组件	可复用的函数/类，返回元素	function App() {...}

组件内部最终也是靠元素来渲染，一个组件可以包含任意多个元素。

小结

React 元素是描述界面的对象，通过 createRoot(...).render(element) 渲染到页面；元素不可变，更新要靠重新 render，而 React 会智能地只更新变化的部分。掌握了元素渲染，就可以放心学习 JSX 与组件了。