React 原理
约 766 字大约 3 分钟
reactprinciples
2026年04月08日
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,还是数据边界?
- 它改变了哪些原有假设?
建议的原理学习顺序
- JSX 与元素对象
- render / commit
- key 与 diff
- state 更新队列
- Fiber 与调度
- Hooks 的规则与实现思路
