React 原理的核心不是记住很多内部名词，而是理解 React 如何把“状态变化”转成“界面更新”。

JSX 到元素对象

JSX 编译后会变成 React 元素描述对象。React 真正处理的不是 DOM，而是一棵描述 UI 的对象树。

可以把它理解为：

• JSX：开发时写法
• React Element：运行时描述
• Fiber：更新时的数据结构
• DOM：最终提交结果

渲染与提交流程

React 更新可以粗分成两个阶段：

• Render：计算下一棵 UI 树
• Commit：把变更提交到真实环境

这个划分很关键，因为很多“为什么这里会执行两次”的问题，都和 Render 阶段的可中断、可重算特性有关。

Diff 与 Key

React 不会做“全树最优 diff”，它依赖若干工程化假设来降低复杂度：

• 同层比较
• 不同类型节点直接替换
• key 帮助识别同层稳定身份

所以列表渲染里 key 的意义是：

• 保持节点身份稳定
• 减少错误复用
• 降低不必要卸载与重建

setState / useState 为什么看起来是异步的

本质原因不是“setState 就是异步函数”，而是 React 会把更新放入队列，再按调度策略统一处理。

你真正需要掌握的是：

• 更新会入队
• 多次更新可能批处理
• 新状态依赖旧状态时用函数式更新

setCount(prev => prev + 1);

Fiber 的意义

Fiber 是 React 16 之后的核心架构升级。它解决的重点是：

• 更新任务可拆分
• 渲染可中断、可恢复
• 不同更新优先级可调度

这为后来的并发特性、流式 SSR、过渡更新等能力打下了基础。

生命周期与 Hooks

旧知识体系常围绕类组件生命周期：

• 挂载
• 更新
• 卸载

现代 React 更强调：

• 组件每次渲染都是一次独立快照
• useEffect 处理副作用同步
• useRef 保存跨渲染可变引用
• Hooks 按调用顺序关联状态槽位

因此 Hooks 必须遵守规则：

• 只在顶层调用
• 只在 React 函数组件或自定义 Hook 中调用

合成事件与批处理

React 在事件系统上做过统一封装，早期是为了兼容和性能，现代更多是为了维持统一调度语义。

理解重点不是事件对象细节，而是：

• 事件触发更新会进入 React 调度体系
• React 决定何时批处理、何时提交

新特性理解方式

面对并发渲染、Suspense、Transition、Server Components 这类新特性时，不要先背 API。先问：

• 它想解决的瓶颈是什么？
• 它影响的是 render、commit，还是数据边界？
• 它改变了哪些原有假设？

建议的原理学习顺序

1. JSX 与元素对象
2. render / commit
3. key 与 diff
4. state 更新队列
5. Fiber 与调度
6. Hooks 的规则与实现思路

贡献者: Ra1n

上一页React 基础

下一页源码阅读