React元素渲染知识点汇总
小白也能看懂的React元素渲染核心概念解析，用通俗语言讲解复杂原理
📌 1. 什么是React元素？
可以把React元素看作是描述屏幕上显示内容的”配方”或”说明书”。
- 不是真实DOM元素：React元素只是一个普通的JavaScript对象
- 轻量级描述：描述组件类型、属性和子元素
- 不可变对象：一旦创建就不能更改其子元素或属性
举例：JSX代码 <h1>Hello, React!</h1> 会被转换成：
const element = {
type: ‘h1’,
props: {
children: ‘Hello, React!’
}
};
type: ‘h1’,
props: {
children: ‘Hello, React!’
}
};
🚀 2. 如何渲染元素到DOM
渲染就是将React元素转换成真实DOM并放入页面的过程：
- 在HTML中创建一个容器元素（通常是div）
- 使用
ReactDOM.createRoot()创建根节点 - 调用
root.render()方法进行渲染
// 1. 在HTML中创建容器
<div id=“root”></div>
// 2. 在React中获取容器并创建根节点
const rootElement = document.getElementById(‘root’);
const root = ReactDOM.createRoot(rootElement);
// 3. 渲染React元素
const element = <h1>Hello, world!</h1>;
root.render(element);
<div id=“root”></div>
// 2. 在React中获取容器并创建根节点
const rootElement = document.getElementById(‘root’);
const root = ReactDOM.createRoot(rootElement);
// 3. 渲染React元素
const element = <h1>Hello, world!</h1>;
root.render(element);
🔄 3. 更新已渲染的元素
React元素是不可变的（不能更改）。要更新UI，你需要创建一个新元素然后重新渲染：
- React只更新必要变化的部分（高效）
- 通过比较新旧元素来决定更新什么（Diff算法）
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
root.render(element);
}
// 每秒调用一次tick函数
setInterval(tick, 1000);
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
);
root.render(element);
}
// 每秒调用一次tick函数
setInterval(tick, 1000);
即使每秒创建新元素重新渲染，React也只会更新变化的时间部分！
⚡ 4. 虚拟DOM与Diff算法
虚拟DOM是React的核心概念：
- React在内存中维护一个UI的”虚拟”表示
- 每次状态变化时，创建新的虚拟DOM树
- Diff算法比较新旧虚拟DOM的差异
- 只更新实际DOM中需要改变的部分
这个过程大大提高了性能，避免了昂贵的全量DOM更新。
💡 大白话解释： 想象你在纸上画一幅画，每次要修改时，不是擦掉整张纸重画，而是只修改需要改变的部分。React的虚拟DOM就是这样的机制！
❓ 5. 条件渲染
根据不同的条件显示不同的内容：
- if/else语句：适合简单的条件判断
- 三元运算符：适合简单的条件表达式
- 逻辑与运算符：适合只有一个条件的情况
// 方法1: if/else语句
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>欢迎回来!</h1>;
} else {
return <h1>请先登录。</h1>;
}
}
// 方法2: 三元运算符
function Message({ isMorning }) {
return (
<div>
{isMorning ? <h1>早上好!</h1> : <h1>晚上好!</h1>}
</div>
);
}
// 方法3: 逻辑与运算符
function Notification({ messageCount }) {
return (
<div>
{messageCount > 0 && <p>您有 {messageCount} 条新消息</p>}
</div>
);
}
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>欢迎回来!</h1>;
} else {
return <h1>请先登录。</h1>;
}
}
// 方法2: 三元运算符
function Message({ isMorning }) {
return (
<div>
{isMorning ? <h1>早上好!</h1> : <h1>晚上好!</h1>}
</div>
);
}
// 方法3: 逻辑与运算符
function Notification({ messageCount }) {
return (
<div>
{messageCount > 0 && <p>您有 {messageCount} 条新消息</p>}
</div>
);
}
📋 6. 列表渲染与Key的重要性
使用数组的map()方法渲染多个元素：
- 每个列表项必须有一个
key属性 - Key帮助React识别哪些项目被更改、添加或删除
- Key应该是稳定的、唯一的（最好用ID）
- 尽量避免使用索引作为key（除非列表不会改变）
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return <ul>{listItems}</ul>;
⚠️ 为什么Key很重要？ 没有key，当列表变化时，React不知道如何高效更新DOM，可能导致性能问题或bug！
🧩 7. 组件渲染
组件是React的核心构建块：
- 函数组件：JavaScript函数返回React元素
- 类组件：ES6类继承React.Component
- 组件名称必须大写字母开头
- 组件可以嵌套和组合
// 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// 使用组件
const element = <Welcome name=”React小白” />;
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// 使用组件
const element = <Welcome name=”React小白” />;
React渲染核心思想总结
1. React元素是描述UI的普通对象
2. 使用ReactDOM.render()将元素渲染到DOM
3. React元素不可变 – 更新UI需要创建新元素
4. 虚拟DOM和Diff算法使更新高效
5. 使用条件渲染展示不同内容
6. 列表渲染必须使用key属性
7. 组件是构建UI的基础块