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

快速入门Flow.js前言最近在看React.js，可能大家知道在React中，大部分源码都是用Flow.js写的，有时候会看不懂是什么意思。所以阅读源码之前，还是有必要快速看一下Flow.js的语法的。简介那Flow.js是什么框架呢？其实它和最近几年非常流行的TypeScript类似，是一个静态类型检查器，我们知道JavaScript是一个弱类型语言，在大型项目、框架实行的过程中，这种弱类型特征会带来一些意想不到的Bug等风险，所以需要引入类型检查器，从根本上避免类型带来的Bug。Vue3.j

React入门之官方例子井字棋“Tic Tac Toe”强化功能的实现（详解，附代码）文章目录React入门之官方例子井字棋“Tic Tac Toe”强化功能的实现（详解，附代码）前言分点讲解显示落棋位置加粗当前选择的历史步骤改变棋盘的输出方式，让其不再是硬编码输出增加一个toggle按钮，能够让历史步骤显示的顺序变化。当有人赢了之后，高亮格子。如果没人胜利，则提示平局消息完整代码演示网址前言在Reactjs的这篇官方入门文档中，初学者会完成一个井字棋的小应用。在文档的最后，作者还给出了6个需求，分别