react源码学习笔记-北京尧图网络

1、virtual domReactNode分为以下几类React$Element其属性有export type ReactElement { $$typeof: any, type: any, key: any, ref: any, props: any, // __DEV__ or for string refs _owner: any, // __DEV__ _store: {validated: 0 | 1 | 2, ...}, // 0: not validated, 1: validated, 2: force fail _debugInfo: null | ReactDebugInfo, _debugStack: Error, _debugTask: null | ConsoleTask, };type支持的类型有functionstringREACT_ACTIVITY_TYPEREACT_FRAGMENT_TYPEREACT_STRICT_MODE_TYPEREACT_PROFILER_TYPEREACT_SUSPENSE_TYPEREACT_SUSPENSE_LIST_TYPEREACT_LEGACY_HIDDEN_TYPEREACT_VIEW_TRANSITION_TYPEREACT_SCOPE_TYPEREACT_TRACING_MARKER_TYPEobject。当类型是object时其属性$$typeof可能值为REACT_CONTEXT_TYPEREACT_CONSUMER_TYPEREACT_FORWARD_REF_TYPEREACT_MEMO_TYPEREACT_LAZY_TYPEReactPortalReactTextReactFragment2、react接口其暴露接口有export { Children{ map, forEach, count, toArray, only }, createMutableSource, createRef, Component, PureComponent, createContext, forwardRef, lazy, memo, useCallback, useContext, useEffect, useImperativeHandle, useDebugValue, useLayoutEffect, useMemo, useMutableSource, useReducer, useRef, useState, REACT_FRAGMENT_TYPE as Fragment, REACT_PROFILER_TYPE as Profiler, REACT_STRICT_MODE_TYPE as StrictMode, REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode, REACT_SUSPENSE_TYPE as Suspense, createElement__DEV__ ? createElementWithValidation : createElementProd, cloneElement__DEV__ ? cloneElementWithValidation : cloneElementProd, isValidElement, ReactVersion as version, ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, // Deprecated behind disableCreateFactory createFactory__DEV__ ? createFactoryWithValidation : createFactoryProd, // Concurrent Mode useTransition, startTransition, useDeferredValue, REACT_SUSPENSE_LIST_TYPE as SuspenseList, REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden, getCacheForType as unstable_getCacheForType, useCacheRefresh as unstable_useCacheRefresh, REACT_CACHE_TYPE as unstable_Cache, // enableScopeAPI REACT_SCOPE_TYPE as unstable_Scope, useOpaqueIdentifier as unstable_useOpaqueIdentifier, };Component和PureComponent定义在ReactBaseClasses.js中。Component定义如下function Component(props, context, updater) { this.props props; this.context context; // If a component has string refs, we will assign a different object later. this.refs emptyObject; // We initialize the default updater but the real one gets injected by the // renderer. this.updater updater || ReactNoopUpdateQueue; } Component.prototype.isReactComponent {}; Component.prototype.setState function(partialState, callback) { invariant( typeof partialState object || typeof partialState function || partialState null, setState(...): takes an object of state variables to update or a function which returns an object of state variables., ); this.updater.enqueueSetState(this, partialState, callback, setState); }; Component.prototype.forceUpdate function(callback) { this.updater.enqueueForceUpdate(this, callback, forceUpdate); };PureComponent定义为function PureComponent(props, context, updater) { this.props props; this.context context; // If a component has string refs, we will assign a different object later. this.refs emptyObject; this.updater updater || ReactNoopUpdateQueue; } const pureComponentPrototype (PureComponent.prototype new ComponentDummy()); pureComponentPrototype.constructor PureComponent; // Avoid an extra prototype jump for these methods. Object.assign(pureComponentPrototype, Component.prototype); pureComponentPrototype.isPureReactComponent true;3、源码解析3.1 ReactDOM.render调用的是ReactDOMLegacy.js中的render。创建reactRoot第一次挂载时采用非批量更新。export function render( element: React$Elementany, container: Container, callback: ?Function, ) { return legacyRenderSubtreeIntoContainer( null, element, container, false, callback, ); } function legacyRenderSubtreeIntoContainer( parentComponent: ?React$Componentany, any, children: ReactNodeList, container: Container, forceHydrate: boolean, callback: ?Function, ) { let root container._reactRootContainer; let fiberRoot: FiberRoot; if (!root) { // Initial mount root container._reactRootContainer legacyCreateRootFromDOMContainer( container, forceHydrate, ); fiberRoot root._internalRoot; if (typeof callback function) { const originalCallback callback; callback function() { const instance getPublicRootInstance(fiberRoot); originalCallback.call(instance); }; } // Initial mount should not be batched. unbatchedUpdates(() { updateContainer(children, fiberRoot, parentComponent, callback); }); } else { fiberRoot root._internalRoot; if (typeof callback function) { const originalCallback callback; callback function() { const instance getPublicRootInstance(fiberRoot); originalCallback.call(instance); }; } // Update updateContainer(children, fiberRoot, parentComponent, callback); } return getPublicRootInstance(fiberRoot); }创建reactRoot是通过调用legacyCreateRootFromDOMContainer最终是调用ReactFiberReconciler.js中的createContainer来创建FiberRoot。function legacyCreateRootFromDOMContainer( container: Container, forceHydrate: boolean, ): RootType { // First clear any existing content. if (!forceHydrate) { let rootSibling; while ((rootSibling container.lastChild)) { container.removeChild(rootSibling); } } return createLegacyRoot( container, forceHydrate ? { hydrate: true, } : undefined, ); } export function createLegacyRoot( container: Container, options?: RootOptions, ): RootType { return new ReactDOMLegacyRoot(container, options); } function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) { this._internalRoot createRootImpl(container, LegacyRoot, options); } function createRootImpl( container: Container, tag: RootTag, options: void | RootOptions, ) { // Tag is either LegacyRoot or Concurrent Root const hydrate options ! null options.hydrate true; const hydrationCallbacks (options ! null options.hydrationOptions) || null; const mutableSources (options ! null options.hydrationOptions ! null options.hydrationOptions.mutableSources) || null; const isStrictMode options ! null options.unstable_strictMode true; let concurrentUpdatesByDefaultOverride null; if (allowConcurrentByDefault) { concurrentUpdatesByDefaultOverride options ! null options.unstable_concurrentUpdatesByDefault ! null ? options.unstable_concurrentUpdatesByDefault : null; } const root createContainer( container, tag, hydrate, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, ); markContainerAsRoot(root.current, container); const rootContainerElement container.nodeType COMMENT_NODE ? container.parentNode : container; listenToAllSupportedEvents(rootContainerElement); if (mutableSources) { for (let i 0; i mutableSources.length; i) { const mutableSource mutableSources[i]; registerMutableSourceForHydration(root, mutableSource); } } return root; } export function createContainer( containerInfo: Container, tag: RootTag, hydrate: boolean, hydrationCallbacks: null | SuspenseHydrationCallbacks, isStrictMode: boolean, concurrentUpdatesByDefaultOverride: null | boolean, ): OpaqueRoot { return createFiberRoot( containerInfo, tag, hydrate, hydrationCallbacks, isStrictMode, concurrentUpdatesByDefaultOverride, ); } export function createFiberRoot( containerInfo: any, tag: RootTag, hydrate: boolean, hydrationCallbacks: null | SuspenseHydrationCallbacks, isStrictMode: boolean, concurrentUpdatesByDefaultOverride: null | boolean, ): FiberRoot { const root: FiberRoot (new FiberRootNode(containerInfo, tag, hydrate): any); if (enableSuspenseCallback) { root.hydrationCallbacks hydrationCallbacks; } // Cyclic construction. This cheats the type system right now because // stateNode is any. const uninitializedFiber createHostRootFiber( tag, isStrictMode, concurrentUpdatesByDefaultOverride, ); root.current uninitializedFiber; uninitializedFiber.stateNode root; if (enableCache) { const initialCache new Map(); root.pooledCache initialCache; const initialState { element: null, cache: initialCache, }; uninitializedFiber.memoizedState initialState; } else { const initialState { element: null, }; uninitializedFiber.memoizedState initialState; } initializeUpdateQueue(uninitializedFiber); return root; }3.2 ReactDOM.createRootcreateRoot创建的类型为ReactDOMRoot成员有_internalRoot(类型为FiberRoot是通过createContainer创建)FiberRoot与Fiber关系为其有两个方法renderReactDOMRoot.prototype.render function (children: ReactNodeList): void { const root this._internalRoot; if (root null) { throw new Error(Cannot update an unmounted root.); } updateContainer(children, root, null, null); }; export function updateContainer( element: ReactNodeList, container: OpaqueRoot, parentComponent: ?component(...props: any), callback: ?Function, ): Lane { const current container.current; const lane requestUpdateLane(current); updateContainerImpl( current, lane, element, container, parentComponent, callback, ); return lane; }unmount3.3 React-reconcilerDispatcher作为hooks的关键实现其定义为export type Dispatcher { use: T(UsableT) T, readContextT(context: ReactContextT): T, useStateS(initialState: (() S) | S): [S, DispatchBasicStateActionS], useReducerS, I, A( reducer: (S, A) S, initialArg: I, init?: (I) S, ): [S, DispatchA], useContextT(context: ReactContextT): T, useRefT(initialValue: T): {current: T}, useEffect( create: () (() void) | void, deps: Arraymixed | void | null, ): void, useEffectEvent: Args, F: (...ArrayArgs) mixed(callback: F) F, useInsertionEffect( create: () (() void) | void, deps: Arraymixed | void | null, ): void, useLayoutEffect( create: () (() void) | void, deps: Arraymixed | void | null, ): void, useCallbackT(callback: T, deps: Arraymixed | void | null): T, useMemoT(nextCreate: () T, deps: Arraymixed | void | null): T, useImperativeHandleT( ref: {current: T | null} | ((inst: T | null) mixed) | null | void, create: () T, deps: Arraymixed | void | null, ): void, useDebugValueT(value: T, formatterFn: ?(value: T) mixed): void, useDeferredValueT(value: T, initialValue?: T): T, useTransition(): [ boolean, (callback: () void, options?: StartTransitionOptions) void, ], useSyncExternalStoreT( subscribe: (() void) () void, getSnapshot: () T, getServerSnapshot?: () T, ): T, useId(): string, useCacheRefresh: () T(?() T, ?T) void, useMemoCache: (size: number) Arrayany, useHostTransitionStatus: () TransitionStatus, useOptimistic: S, A( passthrough: S, reducer: ?(S, A) S, ) [S, (A) void], useFormState: S, P( action: (AwaitedS, P) S, initialState: AwaitedS, permalink?: string, ) [AwaitedS, (P) void, boolean], useActionState: S, P( action: (AwaitedS, P) S, initialState: AwaitedS, permalink?: string, ) [AwaitedS, (P) void, boolean], };Dispatcher实例有ContextOnlyDispatcherHooksDispatcherOnMountHooksDispatcherOnUpdateHooksDispatcherOnRerenderReact Fiber架构将Commit阶段拆分为三个子阶段commitRootcommitBeforeMutationEffectscommitMutationEffectscommitLayoutEffects3.3.1 updateContainer内部调用scheduleUpdateOnFiber会区分同步调用还是异步调用(基于时间片或者优先级)调用ensureRootIsScheduled其会将root添加到由firstScheduledRoot和lastScheduledRoot组成的调度链表中使用Scheduler_scheduleCallback触发调用processRootScheduleInImmediateTask即从链表中取出调度root处理其会区分是否支持微任务支持微任务时调用processRootScheduleInImmediateTask或者processRootScheduleInMicrotask不支持情况调用processRootScheduleInImmediateTask。在processRootScheduleInMicrotask中会调用scheduleTaskForRootDuringMicrotask其内部调用performWorkOnRootViaSchedulerTask调用performWorkOnRoot。在performWorkOnRoot中会区分调用renderRootConcurrent并发渲染workLoopConcurrentworkLoopConcurrentBySchedulerrenderRootSync同步渲染workLoopSync在workLoopConcurrentworkLoopConcurrentByScheduler或者workLoopSync都会调用performUnitOfWorkperformUnitOfWork会调用beginWorkbeginWork会区分组件类型类组件还是函数组件对于类组件会调用 updateClassComponentupdateClassComponent在更新过程中会先调用nextChildren instance.render();然后调用reconcileChildren(current, workInProgress, nextChildren, renderLanes);同步调用flushSyncWorkOnLegacyRootsOnly3.4 createElement根据类型配置属性以及子节点创建ReactElement。由编译期Babel 把 JSX 编译成React.createElement()export function createElement(type, config, children) { let propName; // Reserved names are extracted const props {}; let key null; if (config ! null) { if (hasValidKey(config)) { if (enableOptimisticKey config.key REACT_OPTIMISTIC_KEY) { key REACT_OPTIMISTIC_KEY; } else { key config.key; } } // Remaining properties are added to a new props object for (propName in config) { if ( hasOwnProperty.call(config, propName) // Skip over reserved prop names propName ! key // Even though we dont use these anymore in the runtime, we dont want // them to appear as props, so in createElement we filter them out. // We dont have to do this in the jsx() runtime because the jsx() // transform never passed these as props; it used separate arguments. propName ! __self propName ! __source ) { props[propName] config[propName]; } } } // Children can be more than one argument, and those are transferred onto // the newly allocated props object. const childrenLength arguments.length - 2; if (childrenLength 1) { props.children children; } else if (childrenLength 1) { const childArray Array(childrenLength); for (let i 0; i childrenLength; i) { childArray[i] arguments[i 2]; } props.children childArray; } // Resolve default props if (type type.defaultProps) { const defaultProps type.defaultProps; for (propName in defaultProps) { if (props[propName] undefined) { props[propName] defaultProps[propName]; } } } const trackActualOwner __DEV__ ReactSharedInternals.recentlyCreatedOwnerStacks ownerStackLimit; let debugStackDEV false; return ReactElement( type, key, props, getOwner(), debugStackDEV, __DEV__ (trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask), ); } function ReactElement(type, key, props, owner, debugStack, debugTask) { // Ignore whatever was passed as the ref argument and treat props.ref as // the source of truth. The only thing we use this for is element.ref, // which will log a deprecation warning on access. In the next release, we // can remove element.ref as well as the ref argument. const refProp props.ref; // An undefined element.ref is coerced to null for // backwards compatibility. const ref refProp ! undefined ? refProp : null; let element; { // In prod, ref is a regular property and _owner doesnt exist. element { // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Built-in properties that belong on the element type, key, ref, props, }; } return element; }3.5 contextchildContextTypes和contextTypes是React 旧版 Context APILegacy Context中的一对核心属性用于实现跨组件层级的数据传递。它们必须配合使用但职责完全不同childContextTypes定义在提供者父组件上声明getChildContext()返回的 context 对象中每个属性的类型。contextTypes定义在消费者子/后代组件上声明该组件希望从 context 中读取哪些属性

react源码学习笔记

相关推荐

Cartographer实战指南：环境配置、TF坐标系与建图参数调优

高清摄像机测试方法详解：从MTF50到动态范围的工程化验证

告别 API 费用：Ollama 本地部署大模型完整指南（从安装到代码调用一篇通）

更多资讯

如何在windows11禁止ollama开机启动

Kali Linux入门必看：3天速成网络安全基础，小白也能轻松上手！收藏起来学！

SQL注入实战：低权限服务账户下如何以内网跳板实现C2上线（收藏必备）

2026年AI安全上市公司梳理：产品、认证与商业化进展

PLC数据处理指令详解：从传送比较到移位转换的实战应用

DeepSeek私有化部署全攻略：SpringBoot集成与语音图片交互实战

今日更新

小波包能量谱原理与MATLAB实现：从频带分解到故障特征提取

基于LSTM的网易云音乐评论情感分析：数据清洗与模型调优实战

Alpha-Beta剪枝与极大极小值算法：博弈树搜索原理与实战优化

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？