ljinest

任务调度入口函数文章目录任务调度入口函数*performSyncWorkOnRoot*(root)*performConcurrentWorkOnRoot*(root, didTimeout)*flushSyncCallbacks*()*performUnitOfWork*(unitOfWork: Fiber)*completeUnitOfWork*(unitOfWork: Fiber)*renderRootSync*(root: FiberRoot, lanes: Lanes)*workLoopSync

调度器文章目录调度器import内容变量方法*advanceTimers*(currentTime)*flushWork*(hasTimeRemaining, initialTime)*workLoop*(hasTimeRemaining, initialTime)*requestHostTimeout*(callback, ms)*handleTimeout*(currentTime)*unstable_runWithPriority*(priorityLevel, eventHandler)*unst

Context在更新组件实例的时候，我们需要判断props、state、context等内容变化，本文查看context源码。位置：packages\react\src\ReactContext.jsimport {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';// 导入Context类型值import type {ReactContext} from 'shared/ReactTypes';expo

ReactSymbols在ReactSymbols中，React定义了一些全局的Symbol变量，利用ES2016 Symbol的特性来定义各种React类型以供框架使用。// 如果在旧浏览器中无法使用Symbol或者其他兜底代码，则使用16进制来规定各种ReactTypeexport let REACT_ELEMENT_TYPE = 0xeac7;export let REACT_PORTAL_TYPE = 0xeaca;export let REACT_FRAGMENT_TYPE = 0xea

Updater在创建Component组件的时候，我们需要传入Updater，控制组件状态的更新。今天我们来看看Updater的源码，定义，看能学习到什么东西。位置：react-reconciler\src\ReactFiberClassComponent.new.jsclassComponentUpdater// Updater 作为一个对象const classComponentUpdater = { // 属性是否挂载 isMounted, // 入队设置状态state en

【React】版本18 源码遨游（六） 车道 Lanes车道是React调度，协调过程中很重要的一个新概念。今天我们详细过一遍车道的源码。位置：react-reconciler\src\ReactFiberLane.new.js车道数量、定义车道是用位图定义的，它由一个31位的二进制数来保存、指示车道信息。在低位的 1 的权重大，在高位的 1 权重小。我们看一共定义了哪些车道：// 一共有31条车道export const TotalLanes = 31;// 表示没有车道，所有位都为0

React DOM createRoot()在v18.0之后，DOM.render()方法已经被归为Legacy，取而代之的是DOM.createRoot()方法。export function createRoot( container: Container, options?: CreateRootOptions,): RootType { // 判断container有效性 invariant( isValidContainerLegacy(container),

React InternalType 数据结构在进入到DOM渲染更新之前，我们先看一看React的内部类型。源码位置：react-reconciler\src\ReactInternalTypes.jsFiber// Fiber是组件上需要完成但未完成的工作，一个组件上的Fiber数量可以多于一个export type Fiber = {| // 下述五个属性为实例的属性成员，它们曾被定义在另一个类型中然后和Fiber类型相交 // 单时由于Flow相交的Bug，暂时分配到Fiber类型中

React Children文章目录React ChildrenescapeescapeUserProvidedKeygetElementKeymapIntoArraymapChildrenchildren.map流程图实例（1）（2）（3）（4）（5）（a）总结ReactChildren提供了许多处理props.children的方法。本文将源码由上往下解析。escapefunction escape(key: string): string { const escapeRegex = /[=

React源码遨游今天新开的专栏主要围绕着React源码进行学习，切入口主要围绕着React的顶层API（即React）。createElement()createElment() 隶属于顶层ApiReact的 /src/ReactElement.js中。首先我们看一下创建组件的代码，然后逐句分析一下。export function createElement(type, config, children) { let propName; // Reserved names are ex

React源码遨游（二） 组件 Component文章目录React源码遨游（二） 组件 ComponentReact.Component`Component``ReactNoopUpdateQueue``setState``forceUpdate``ComponentDummy``PureComponent`总结在React中，你可以将组件定义为class或者function用class定义的组件会有更多的功能。定义一个组件类，你需要extend React.Component。class Wel