当前位置： 首页 > news >正文

React19源码系列之 API (react)

news 2025/6/26 6:45:54

本次文件记录react库中相关API函数的使用及起源码实现。

createRef：createRef – React

createContext：createContext – React 中文文档

memo：memo – React 中文文档

startTransition：startTransition – React 中文文档

use：use – React 中文文档

lazy：lazy – React

createRef

React 中 createRef 函数的实现，主要用于 创建一个可变的 ref 对象，该对象在组件的整个生命周期内保持不变。createRef 主要用于 class 组件。

 function createRef(): RefObject {const refObject = {current: null,};return refObject;
}

createContext

React 中 createContext 函数的实现，主要用于 创建上下文（Context）对象，实现跨组件层级的数据共享。

function createContext<T>(defaultValue: T): ReactContext<T> {// 创建上下文对象const context: ReactContext<T> = {$$typeof: REACT_CONTEXT_TYPE,// 标记对象类型，用于 React 内部识别。_currentValue: defaultValue,// 存储不同渲染阶段的上下文值_currentValue2: defaultValue,// 存储不同渲染阶段的上下文值_threadCount: 0,// 并发线程计数（用于并发模式下的状态追踪）。// These are circularProvider: (null: any),// 提供上下文的组件Consumer: (null: any),// 消费上下文的组件};if (enableRenderableContext) {// 新 API 模式（函数式）context.Provider = context;context.Consumer = {$$typeof: REACT_CONSUMER_TYPE,_context: context,};} else {// 旧 API 模式（render prop）(context: any).Provider = {$$typeof: REACT_PROVIDER_TYPE,_context: context,};(context: any).Consumer = context;}return context;
}

memo

memo 函数是 React 中用于创建记忆化组件的高阶函数，它的作用是对传入的组件进行包装，返回一个新的组件类型。这个新组件会对前后两次的 props 进行比较，如果 props 没有发生变化，React 就不会重新渲染该组件，从而避免不必要的渲染，提高性能。

function memo<Props>(type: React$ElementType,compare?: (oldProps: Props, newProps: Props) => boolean,
) {// 创建新的元素类型对象const elementType = {$$typeof: REACT_MEMO_TYPE,type,compare: compare === undefined ? null : compare,};return elementType;
}

startTransition

React 中 过渡（Transition）机制 的核心实现，主要用于 将高优先级的紧急更新转换为低优先级的过渡更新。

function startTransition(scope: () => void,options?: StartTransitionOptions,
) {// ReactSharedInternals.T 存储当前过渡上下文。const prevTransition = ReactSharedInternals.T;const currentTransition: BatchConfigTransition = {};ReactSharedInternals.T = currentTransition;//  支持过渡命名if (enableTransitionTracing) {if (options !== undefined && options.name !== undefined) {currentTransition.name = options.name;currentTransition.startTime = -1;}}// 执行过渡回调（异步模式）if (enableAsyncActions) {try {// 执行用户传入的回调，其中的 setState 会被标记为过渡更新。const returnValue = scope();const onStartTransitionFinish = ReactSharedInternals.S;if (onStartTransitionFinish !== null) {onStartTransitionFinish(currentTransition, returnValue);}// 处理异步返回值（Promise）if (typeof returnValue === 'object' &&returnValue !== null &&typeof returnValue.then === 'function') {returnValue.then(noop, reportGlobalError);}} catch (error) {// 捕获同步错误reportGlobalError(error);} finally {// 检查过渡期间是否存在未完成的订阅（如 useEffect 未清理），并发出警告。// warnAboutTransitionSubscriptions(prevTransition, currentTransition);// 恢复旧上下文ReactSharedInternals.T = prevTransition;}} else {try {scope();} finally {// warnAboutTransitionSubscriptions(prevTransition, currentTransition);ReactSharedInternals.T = prevTransition;}}
}
type StartTransitionOptions = {name?: string,
};

type BatchConfigTransition = {name?: string,startTime?: number,_updatedFibers?: Set<Fiber>,
};

ReactSharedInternals.S

React 中 异步过渡（Async Transition） 机制的核心实现，主要用于 处理过渡回调返回的 Promise，并将其与过渡生命周期绑定。

ReactSharedInternals.S = function onStartTransitionFinishForReconciler(transition: BatchConfigTransition,returnValue: mixed,
) {if (enableAsyncActions &&typeof returnValue === 'object' &&returnValue !== null &&typeof returnValue.then === 'function') {// 启动计时器，记录过渡开始时间。startAsyncTransitionTimer();const thenable: Thenable<mixed> = (returnValue: any);// 将过渡与 Promise 绑定，确保 Promise 状态变化能触发相应的过渡回调。entangleAsyncAction(transition, thenable);}// 链式调用前一个回调if (prevOnStartTransitionFinish !== null) {prevOnStartTransitionFinish(transition, returnValue);}
};

entangleAsyncAction

React 中 异步过渡（Async Transition） 机制的核心实现，主要用于 将异步操作（如 Promise）与过渡生命周期绑定，确保异步操作的完成状态能正确影响 UI 更新。

function entangleAsyncAction<S>(transition: BatchConfigTransition,thenable: Thenable<S>,
): Thenable<S> {// 1.初始化异步操作上下文// currentEntangledListeners：存储所有异步操作完成后的回调函数。if (currentEntangledListeners === null) {// There's no outer async action scope. Create a new one.const entangledListeners = (currentEntangledListeners = []);// 记录未完成的异步操作数量。currentEntangledPendingCount = 0;// 获取过渡车道（Lane），用于优先级调度。currentEntangledLane = requestTransitionLane(transition);// entangledThenable：自定义 Promise 接口，用于收集所有异步操作的完成回调。const entangledThenable: Thenable<void> = {status: 'pending',value: undefined,then(resolve: void => mixed) {entangledListeners.push(resolve);},};currentEntangledActionThenable = entangledThenable;}// 2.增加未完成计数并绑定回调// 未完成异步操作数量加 1。currentEntangledPendingCount++;// 无论 Promise 成功或失败，都调用 pingEngtangledActionScope。thenable.then(pingEngtangledActionScope, pingEngtangledActionScope);return thenable;
}

pingEngtangledActionScope

React 中 异步过渡（Async Transition） 机制的核心回调函数，主要用于 在所有关联的异步操作完成后触发 UI 更新。

function pingEngtangledActionScope() {// 当计数减为 0 时，表示所有异步操作已完成。if (--currentEntangledPendingCount === 0) {// if (enableProfilerTimer && enableComponentPerformanceTrack) {//   if (!hasScheduledTransitionWork()) {//    // 停止性能计时器（如果启用了性能追踪）。//     clearAsyncTransitionTimer();//   }// }if (currentEntangledListeners !== null) {// All the actions have finished. Close the entangled async action scope// and notify all the listeners.if (currentEntangledActionThenable !== null) {const fulfilledThenable: FulfilledThenable<void> = (currentEntangledActionThenable: any);// 将其状态标记为 'fulfilled'，表示所有操作已完成。fulfilledThenable.status = 'fulfilled';}const listeners = currentEntangledListeners;// 清空 currentEntangledListenerscurrentEntangledListeners = null;// 重置 currentEntangledLane（过渡优先级车道）currentEntangledLane = NoLane;currentEntangledActionThenable = null;// 执行所有注册的回调函数（listeners），触发 React 的渲染流程。for (let i = 0; i < listeners.length; i++) {const listener = listeners[i];listener();}}}
}let currentEntangledListeners: Array<() => mixed> | null = null;

use

lazy

lazy 函数用于创建懒加载组件。懒加载组件允许开发者在需要时才加载组件代码，而不是在应用启动时就加载所有组件代码，从而提高应用的加载性能。代码通过定义不同的加载状态常量，并使用一个闭包来管理组件的加载过程，实现了组件的懒加载功能。

函数参数说明：

  • 参数 ctor：类型为 () => Thenable<{default: T, ...}>，是一个返回 Promise 的函数。这个函数通常是动态导入组件的函数，例如 () => import('./MyComponent')。
function lazy<T>(ctor: () => Thenable<{default: T, ...}>,
): LazyComponent<T, Payload<T>> {// 创建负载对象 payloadconst payload: Payload<T> = {//初始状态为 Uninitialized，表示组件还未开始加载。_status: Uninitialized,// 存储 ctor 函数，即动态导入组件的函数。_result: ctor,};// 创建懒加载组件对象 lazyTypeconst lazyType: LazyComponent<T, Payload<T>> = {// 值为 REACT_LAZY_TYPE，这是 React 用于标识懒加载组件的特殊属性。$$typeof: REACT_LAZY_TYPE,// 存储前面创建的 payload 对象，包含组件的加载状态和动态导入函数。_payload: payload,// 指向 lazyInitializer 函数，该函数用于初始化组件的加载过程。_init: lazyInitializer,};// 返回懒加载组件对象return lazyType;
}

type LazyComponent<T, P> = {$$typeof: symbol | number,_payload: P,_init: (payload: P) => T,_debugInfo?: null | ReactDebugInfo,
};

 Promise 或异步操作的不同状态

  • Uninitialized：值为 -1，表示组件还未开始加载，处于未初始化状态。
  • Pending：值为 0，表示组件正在加载中。
  • Resolved：值为 1，表示组件已经成功加载。
  • Rejected：值为 2，表示组件加载失败。
const Uninitialized = -1;
const Pending = 0;
const Resolved = 1;
const Rejected = 2;

lazyInitializer

lazyInitializer 函数是 React 中用于实现懒加载组件初始化逻辑的核心函数。它负责处理懒加载组件的加载过程，根据组件的不同加载状态（未初始化、加载中、已加载、加载失败）执行相应的操作，最终返回加载好的组件或者抛出加载错误。

function lazyInitializer<T>(payload: Payload<T>): T {if (payload._status === Uninitialized) {// Uninitialized代表-1// 从 payload._result 中获取动态导入组件的函数 ctor 并执行，得到一个 Promise 对象 thenable。const ctor = payload._result;const thenable = ctor();// 处理 Promise 的结果thenable.then(// 当 thenable 成功解决时，检查 payload 的状态是否为 Pending（加载中）或 Uninitialized（未初始化）。如果是，则将 payload 的状态更新为 Resolved（已加载），并将加载的模块对象存储在 _result 中。moduleObject => {if ((payload: Payload<T>)._status === Pending ||payload._status === Uninitialized) {// Transition to the next state.const resolved: ResolvedPayload<T> = (payload: any);//代表组件加载完成resolved._status = Resolved;//执行结果resolved._result = moduleObject;}},// 当 thenable 被拒绝时，同样检查 payload 的状态。如果是 Pending 或 Uninitialized，则将 payload 的状态更新为 Rejected（加载失败），并将错误信息存储在 _result 中。error => {if ( //Pending代表0(payload: Payload<T>)._status === Pending ||payload._status === Uninitialized) {// Transition to the next state.const rejected: RejectedPayload = (payload: any);// 组件加载失败rejected._status = Rejected;//Rejected代表2 rejected._result = error;}},);//如果在处理 Promise 后，payload 的状态仍然是 Uninitialized，则将其状态更新为 Pending（加载中），并将 thenable 存储在 _result 中。if (payload._status === Uninitialized) {const pending: PendingPayload = (payload: any);pending._status = Pending;pending._result = thenable;}}// 返回加载结果// 如果 payload._status 为 Resolved（已加载），则从 payload._result 中获取加载的模块对象，并返回其 default 属性，通常这就是懒加载的组件。if (payload._status === Resolved) {//Resolved代表1const moduleObject = payload._result;return moduleObject.default;} else {// 抛出错误throw payload._result;}
}

http://www.lryc.cn/news/574876.html

相关文章：

  • Spring Boot 系统开发：打造高效、稳定、可扩展的企业级应用
  • Flutter MobX 响应式原理与实战详解
  • 将Python Tkinter程序转换为手机可运行的Web应用 - 详细教程
  • 高效学习的系统化策略
  • 初识Tomcat
  • Linux系统之Tomcat服务
  • web端rtmp推拉流测试、抽帧识别计数，一键式生成巡检报告
  • 覆盖迁移工具选型、增量同步策略与数据一致性校验
  • Serverless架构下的OSS应用：函数计算FC自动处理图片/视频转码（演示水印添加+缩略图生成流水线）
  • 多模态大模型（从0到1）
  • Netty内存池核心PoolArena源码解析
  • React 表单太卡？也许你用错了控制方式
  • 有AI后，还用学编程吗？
  • C# WinForm跨平台串口通讯实现
  • python中学物理实验模拟：摩檫力
  • Vue 英雄列表搜索与排序功能实现
  • 基于 LCD1602 的超声波测距仪设计与实现：从原理到应用
  • uniapp项目之小兔鲜儿小程序商城(六) 地址模块:地址管理页的实现,地址表单页的实现
  • Metasploit常用命令详解
  • 2023年全国青少年信息素养大赛Python 复赛真题——玩石头游戏
  • 2025.6.16-实习
  • 搭建智能问答系统，有哪些解决方案，比如使用Dify，LangChain4j+RAG等
  • JVM(11)——详解CMS垃圾回收器
  • 猿人学js逆向比赛第一届第十二题
  • CDN+OSS边缘加速实践：动态压缩+智能路由降低30%视频流量成本（含带宽峰值监控与告警配置）
  • RSS解析并转换为JSON的API集成指南
  • SQL Server从入门到项目实践（超值版）读书笔记 18
  • [学习] C语言编程中线程安全的实现方法（示例）
  • 【Datawhale组队学习202506】YOLO-Master task04 YOLO典型网络模块
  • Python训练营-Day40-训练和测试的规范写法