react 渲染是指将组件的 jsx 描述转化为真实 dom 节点并更新到浏览器页面的过程，其核心是基于虚拟 dom 的高效同步与差异更新。
react 渲染是指将组件的 jsx 描述转化为真实 dom 节点并更新到浏览器页面的过程，其核心是基于虚拟 dom 的高效同步与差异更新。
在 React 中，“渲染”（rendering）并非简单地调用 document.createElement()，而是一套声明式、可预测且高度优化的 UI 更新机制。当你定义一个函数组件（如 function App() { return <h1>Hello</h1>; }），你实际是在描述“此刻 UI 应该是什么样子”；而 React 的渲染过程，就是将这份描述落地为浏览器中可见的真实界面。
渲染的本质：从 JSX 到真实 DOM
React 组件返回的 JSX 并非 HTML 字符串，而是经 Babel 编译后生成的 React.createElement() 调用，最终构建成轻量级的 JavaScript 对象树——即虚拟 DOM（Virtual DOM）。React 会将这棵虚拟树与当前真实 DOM 进行比对（diffing），仅提交最小化的变更（如文本更新、属性修改、节点增删），再批量应用到真实 DOM，从而避免昂贵的全量重绘。
例如：
function Greeting({ name }) {
return <p>Hello, {name}!</p>;
}
// 若 name = "Alice"，渲染结果等价于：
// <p>Hello, Alice!</p>
// React 自动将其转换为 DOM 节点并插入容器（如 root.getElementById('root')）两种关键渲染类型
- 初始渲染（Initial Render）：应用首次挂载时，React 将根组件的返回值完整渲染至指定 DOM 容器（通过 ReactDOM.createRoot(root).render(<App />)）。
- 更新渲染（Re-render）：当组件状态（useState）、属性（props）或上下文（useContext）发生变化时，React 会自动触发该组件及其受影响子组件的重新执行与渲染——但仅更新变化部分，而非整页刷新。
⚠️ 注意：
- 渲染函数必须是纯函数：相同输入（props/state）始终返回相同 JSX 结构，不产生副作用（如直接操作 DOM、发起 API 请求等应放在 useEffect 中）。
- 频繁无意义的 re-render 可能影响性能。可通过 React.memo、useMemo、useCallback 等优化策略减少不必要的渲染。
- JSX 中的 {} 是表达式插值语法，支持变量、三元运算、数组映射等，实现动态内容渲染（如 items.map(item => <li key={item.id}>{item.name}</li>)）。
总之，理解渲染是掌握 React 的基石：它不是命令式地“操作 DOM”，而是声明式地“描述 UI 状态”，由 React 负责高效、可靠地实现这一描述。掌握渲染时机、原理与优化手段，是构建高性能 React 应用的关键一步。
