React全部api解读|原理篇 | 前端进阶之旅

⚡ 30 秒速记

核心判断：理解原理要建立输入、状态变化、输出和失败边界，而不是只记 API 与结论
原理主线：围绕「组件类」、「工具类」、「react-hooks」建立输入、状态变化与输出之间的因果关系
文章范围：系统梳理了 React 的全部核心 API，包括组件类（Component、PureComponent）、内置组件（Fragment、StrictMode）、高阶组件（forwardRef、memo）等，详细解析每个 API 的原理、用法及
边界与代价：文章中的实现通常有版本和场景前提，迁移到当前项目时必须先核对运行环境与依赖
工程落地：面试回答按核心机制、执行链路、边界反例和工程验证展开，最后说明取舍

React 的 API 本质上是在控制组件描述、更新边界和渲染时机，不能只记调用方式。 比如 PureComponent 浅比较 props 与 state，React.memo 只比较 props，而自定义比较函数返回 true 反而表示跳过渲染。forwardRef 用于转发特殊处理的 ref，lazy 通常配合 Suspense 处理异步组件。涉及旧生命周期或 ReactDOM.render 时，还要区分历史实现与当前版本行为。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

# 组件类

组件类，详细分的话有三种类，第一类说白了就是我平时用于继承的基类组件Component,PureComponent,还有就是react提供的内置的组件，比如Fragment,StrictMode,另一部分就是高阶组件forwardRef,memo等。

# Component

Component是class组件的根基。类组件一切始于Component。对于React.Component使用，我们没有什么好讲的。我们这里重点研究一下react对Component做了些什么。

react/src/ReactBaseClasses.js
function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}