前端小卒

Appearance

附录C 术语表 ​

本附录提供《深入浅出React 19全栈源码》中涉及的所有核心术语和概念的定义与解释，按字母顺序排列，方便读者快速查阅。

A ​

alternate ​

Fiber节点的属性，指向另一棵Fiber树中对应的节点。React使用双缓冲机制维护current树和workInProgress树，每个节点通过alternate指针相互连接。

async/await ​

JavaScript的异步编程语法。React Server Components支持async函数组件，可以直接在组件中使用await获取数据。

B ​

beginWork ​

React协调过程的第一个阶段，负责处理Fiber节点，执行组件函数或类的render方法，生成子Fiber节点。对应源码文件：ReactFiberBeginWork.js。

Bundle Size ​

打包后的JavaScript文件大小。React Server Components的核心优势之一是"零Bundle Size"——服务端组件的代码不会打包到客户端。

C ​

Chunk ​

Flight协议中的数据单元，每行代表一个Chunk。常见类型包括Model Chunk（普通数据）、Import Chunk（模块引用）、Symbol Chunk（Symbol定义）等。

Client Component ​

标记了"use client"指令的组件，在客户端执行，可以使用useState、useEffect等Hooks，可以响应用户交互。

commit阶段 ​

React渲染的第三个阶段，将协调阶段收集的副作用应用到DOM。分为before mutation、mutation和layout三个子阶段。

completeWork ​

React协调过程的第二个阶段，在beginWork处理完子节点后执行，负责创建或更新DOM节点，收集副作用。

Concurrent Mode ​

React 18引入的并发模式，允许React同时准备多个版本的UI，可以中断渲染工作，优先处理高优先级更新。

CSR (Client-Side Rendering) ​

客户端渲染，所有渲染工作在浏览器中进行。用户首先下载JavaScript，然后执行代码渲染页面。

current树 ​

React双缓冲机制中的一棵树，表示当前屏幕上显示的内容对应的Fiber树。

D ​

DefaultLane ​

React Lane优先级模型中的默认优先级，用于普通的用户交互（如点击、输入）产生的更新。超时时间为5秒。

Diff算法 ​

React协调过程中比较新旧Fiber树的算法，找出需要更新的节点。React的Diff算法基于三个假设：不同类型的元素产生不同的树、通过key标识列表中的元素、同级元素之间进行比较。

Dispatcher ​

React Hooks的调度机制。React在不同阶段（mount、update、re-render）使用不同的Dispatcher，确保Hooks在正确的时机执行正确的逻辑。

Double Buffering ​

双缓冲技术，React维护两棵Fiber树（current和workInProgress），在内存中构建新树，完成后一次性切换，避免中间状态显示。

E ​

Effect ​

副作用，指组件渲染之外的操作，如数据获取、订阅、手动修改DOM等。React通过useEffect和useLayoutEffect管理副作用。

ExpirationTime ​

React 18之前使用的优先级模型，通过过期时间表示任务优先级。React 18+使用Lane模型替代。

F ​

Fiber ​

React 16引入的核心概念，有两层含义：1) 架构层面，Fiber是React的协调引擎；2) 数据结构层面，Fiber是一个JavaScript对象，表示一个工作单元。

Fizz ​

React服务端流式渲染引擎的内部代号，负责将React组件树渲染成HTML并通过流式输出发送给客户端。

flags ​

Fiber节点的属性，使用位掩码标记需要执行的副作用，如Placement（插入）、Update（更新）、Deletion（删除）等。

Flight ​

React Server Components的序列化协议，负责将服务端渲染的组件树序列化并传输到客户端。

Fragment ​

React提供的特殊组件，允许返回多个子元素而不添加额外的DOM节点。可以使用<React.Fragment>或简写<></>。

H ​

HostComponent ​

Fiber节点类型之一（tag=5），表示原生DOM元素，如div、span等。

HostRoot ​

Fiber节点类型之一（tag=3），表示Fiber树的根节点，对应createRoot或hydrateRoot创建的根。

HostText ​

Fiber节点类型之一（tag=6），表示文本节点。

Hooks ​

React 16.8引入的特性，允许在函数组件中使用状态和其他React特性。常见Hooks包括useState、useEffect、useContext等。

Hydration ​

水合，将服务端渲染的静态HTML与客户端React实例关联的过程。React会复用服务端生成的DOM节点，绑定事件处理器，恢复组件状态。

I ​

IdlePriority ​

Scheduler的最低优先级（值为5），用于可以无限延迟的任务，如离屏内容预渲染、缓存预热。永不超时。

ImmediatePriority ​

Scheduler的最高优先级（值为1），用于必须同步执行的任务，如受控输入框更新、flushSync调用。超时时间为-1ms（立即）。

InputContinuousLane ​

React Lane优先级模型中用于连续用户输入的优先级，如拖拽、滚动等操作产生的更新。

J ​

JSX ​

JavaScript XML，React的语法扩展，允许在JavaScript中编写类似HTML的代码。JSX会被Babel编译为React.createElement或jsx函数调用。

L ​

Lane ​

React 18引入的优先级模型，使用32位整数的每一位表示一个优先级"车道"。通过位运算实现高效的优先级合并、检查和移除。

Lazy ​

React提供的懒加载功能，通过React.lazy动态导入组件，实现代码分割。

layout阶段 ​

commit阶段的第三个子阶段，在DOM变更完成后同步执行，用于执行useLayoutEffect、更新ref等需要读取DOM布局的操作。

LowPriority ​

Scheduler的低优先级（值为4），用于不紧急的更新，如分析数据收集、日志记录。超时时间为10秒。

M ​

memo ​

React提供的高阶组件，用于记忆化函数组件。只有当props变化时才重新渲染，类似类组件的PureComponent。

memoizedProps ​

Fiber节点的属性，保存组件当前的props（已应用）。

memoizedState ​

Fiber节点的属性，保存组件当前的state。对于函数组件，保存Hooks链表；对于类组件，保存state对象。

MessageChannel ​

Web API，Scheduler使用它实现时间切片。相比setTimeout，MessageChannel没有最小延迟限制，优先级适中。

MinHeap ​

最小堆，一种完全二叉树数据结构，每个节点的值都小于或等于其子节点。Scheduler使用最小堆管理任务队列，实现O(log n)的插入和删除操作。

Monorepo ​

单一代码仓库，React使用Monorepo组织所有相关包，通过Yarn Workspaces管理多包依赖。

mutation阶段 ​

commit阶段的第二个子阶段，执行实际的DOM操作，如插入、更新、删除节点。

N ​

NormalPriority ​

Scheduler的正常优先级（值为3），用于普通更新，如数据获取完成后的更新、定时器触发的更新。超时时间为5秒。

O ​

OffscreenComponent ​

Fiber节点类型之一（tag=22），用于实现内容的显示/隐藏而不销毁组件状态。React内部使用，通常不直接暴露给开发者。

P ​

Placement ​

Fiber flags之一，表示需要插入DOM节点。

pendingProps ​

Fiber节点的属性，保存新的props（即将应用）。React在协调过程中比较memoizedProps和pendingProps来决定是否需要更新组件。

R ​

ReactElement ​

React元素，通过React.createElement或JSX创建的对象，描述UI应该是什么样子。包含type、props、key等属性。

Reconciler ​

协调器，React的核心模块之一，负责计算Virtual DOM差异，实现Fiber架构和协调算法。对应react-reconciler包。

ref ​

React提供的引用机制，用于访问DOM节点或组件实例。可以通过useRef创建或直接传递回调函数。

render阶段 ​

React渲染的第二个阶段，也称协调阶段，包括beginWork和completeWork，可以被中断。

renderToPipeableStream ​

React服务端渲染API，用于Node.js环境的流式SSR，返回可管道化的流对象。

renderToReadableStream ​

React服务端渲染API，用于Web Streams API的流式SSR，返回ReadableStream。

Request ​

Fizz和Flight渲染的核心对象，保存渲染的所有状态，包括任务队列、Segment、边界等信息。

RSC (React Server Components) ​

React服务端组件，React 19的核心特性，允许组件只在服务端运行，零Bundle Size，直接访问后端资源。

S ​

Schedule阶段 ​

React渲染的第一个阶段，接收更新请求，计算更新优先级，调度更新任务。

Scheduler ​

调度器，React的独立包，负责任务优先级调度、时间切片、任务中断与恢复。

Segment ​

Fizz渲染中的HTML片段，表示一段连续的HTML输出。每个Segment有状态（pending/completed/errored）和chunks（HTML块数组）。

Selective Hydration ​

选择性水合，React 18引入的特性，允许客户端优先水合用户交互的部分，而不是等待整个页面水合完成。

Server Actions ​

React 19引入的特性，允许在客户端直接调用服务端函数，简化表单处理和数据变更。

Server Component ​

服务端组件，默认的组件类型（不需要特殊标记），在服务端执行，支持async/await，可以直接访问数据库等服务端资源。

shouldYield ​

Scheduler的函数，判断是否应该让出控制权给浏览器。默认时间片为5ms。

sibling ​

Fiber节点的属性，指向下一个兄弟Fiber节点。

siftDown ​

最小堆的下沉操作，将节点与子节点比较，如果大于子节点则交换位置，维护堆序性。

siftUp ​

最小堆的上浮操作，将节点与父节点比较，如果小于父节点则交换位置，维护堆序性。

SSR (Server-Side Rendering) ​

服务端渲染，在服务器上将React组件渲染为HTML，然后发送给客户端。提升首屏加载速度和SEO。

Stack Reconciler ​

React 16之前使用的协调器，采用递归方式遍历组件树，无法中断。

startTransition ​

React 18引入的API，将更新标记为非紧急的过渡更新，使用TransitionLane优先级，可以被中断。

Streaming SSR ​

流式服务端渲染，React 18引入的特性，允许服务器边渲染边发送HTML，无需等待整个页面完成。

subtreeFlags ​

Fiber节点的属性，保存子树中所有副作用的汇总。用于优化：如果为空，可以跳过子树遍历。

Suspense ​

React提供的组件，用于处理异步加载。当子组件抛出Promise时，Suspense会捕获并显示fallback内容。

SuspenseBoundary ​

Suspense边界，Fizz渲染中的概念，表示一个Suspense组件及其管理的异步内容。

SyncLane ​

React Lane优先级模型中的同步优先级，最高优先级，用于同步更新（如flushSync）。

T ​

tag ​

Fiber节点的属性，标识节点类型（WorkTag），如FunctionComponent(0)、HostComponent(5)等。

Task ​

Fizz渲染中的任务单元，表示一个待渲染的React节点。包含node（要渲染的节点）、segment（输出段）、blockedBoundary（阻塞的Suspense边界）等信息。

Time Slicing ​

时间切片，Scheduler的核心功能，将长任务分解成多个小任务，在每个时间片（默认5ms）之间让出控制权给浏览器。

TransitionLane ​

React Lane优先级模型中用于过渡更新的优先级，通过startTransition或useTransition创建，可以被中断。

TTFB (Time To First Byte) ​

首字节时间，从发起请求到接收到第一个字节的时间。流式SSR可以显著降低TTFB。

TTI (Time To Interactive) ​

可交互时间，从页面开始加载到用户可以进行交互的时间。

type ​

Fiber节点的属性，保存组件的实际类型。对于函数组件是函数本身，对于类组件是类本身，对于原生元素是字符串（如"div"）。

U ​

Update ​

Fiber flags之一，表示需要更新DOM节点的属性。

updateQueue ​

Fiber节点的属性，保存组件的更新队列。对于类组件是setState产生的更新，对于函数组件是useState的dispatch产生的更新。

useCallback ​

React Hook，返回记忆化的回调函数，只有当依赖项变化时才创建新函数。

useContext ​

React Hook，消费Context的值，当Context值变化时组件会重新渲染。

useDeferredValue ​

React 18引入的Hook，返回一个延迟版本的值，允许UI的某部分延迟更新。

useEffect ​

React Hook，用于执行副作用，在DOM更新后异步执行。

useId ​

React 18引入的Hook，生成唯一的ID，在服务端和客户端保持一致，用于可访问性属性。

useLayoutEffect ​

React Hook，用于执行副作用，在DOM更新后同步执行，会阻塞浏览器绘制。

useMemo ​

React Hook，返回记忆化的值，只有当依赖项变化时才重新计算。

useOptimistic ​

React 19引入的Hook，用于实现乐观更新，在Server Actions执行期间显示临时状态。

useReducer ​

React Hook，useState的替代方案，通过reducer函数管理复杂状态。

useRef ​

React Hook，创建一个可变的ref对象，在组件的整个生命周期中保持不变。

useState ​

React Hook，为函数组件添加状态，返回当前状态和更新函数。

useTransition ​

React 18引入的Hook，将状态更新标记为过渡更新，返回pending状态和startTransition函数。

UserBlockingPriority ​

Scheduler的用户阻塞优先级（值为2），用于用户交互产生的更新，如点击、悬停、拖拽。超时时间为250ms。

W ​

workInProgress树 ​

React双缓冲机制中的一棵树，表示正在构建的新Fiber树。完成后会切换为current树。

workLoop ​

React协调过程的核心循环，遍历Fiber树执行工作单元。并发模式下会检查shouldYield，同步模式下一直执行到完成。

WorkTag ​

Fiber节点的类型标识，用数字表示，如FunctionComponent(0)、ClassComponent(1)、HostComponent(5)等。

符号 ​

"use client" ​

指令，标记一个模块及其依赖为Client Component，需要打包到客户端。

"use server" ​

指令，标记一个函数为Server Action，只在服务端执行，可以在客户端直接调用。

数字 ​

5ms ​

Scheduler默认的时间片大小，每个时间片执行5毫秒后让出控制权给浏览器。

本术语表说明 ​

  • 术语来源：本术语表涵盖了React 19源码中的核心概念，包括Fiber架构、调度系统、服务端渲染、React Server Components等。
  • 使用建议：建议读者在阅读源码或遇到不熟悉的术语时查阅本表。
  • 持续更新：React持续演进，新特性会引入新术语。建议关注React官方文档和源码更新。
  • 相关资源：

思考题 ​

  1. 为什么React要从ExpirationTime模型切换到Lane模型？Lane模型有什么优势？
  2. Fiber架构和Stack Reconciler的本质区别是什么？为什么Fiber可以实现可中断渲染？
  3. React Server Components和传统SSR的根本区别是什么？为什么RSC可以实现零Bundle Size？
  4. Flight协议为什么不直接使用JSON？它解决了JSON的哪些问题？
  5. 双缓冲机制在React中起到什么作用？为什么需要维护两棵Fiber树？