React之服务端渲染ReactFizzServer

简介

Fizz是服务端渲染的重要组件

相关接口

function startWork(request: Request): void
function createRequest(
  children: ReactNodeList,
  resumableState: ResumableState,
  renderState: RenderState,
  rootFormatContext: FormatContext,
  progressiveChunkSize: void | number,
  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
  onAllReady: void | (() => void),
  onShellReady: void | (() => void),
  onShellError: void | ((error: mixed) => void),
  onFatalError: void | ((error: mixed) => void),
  formState: void | null | ReactFormState<any, any>,
): Request
function createPrerenderRequest(
  children: ReactNodeList,
  resumableState: ResumableState,
  renderState: RenderState,
  rootFormatContext: FormatContext,
  progressiveChunkSize: void | number,
  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
  onAllReady: void | (() => void),
  onShellReady: void | (() => void),
  onShellError: void | ((error: mixed) => void),
  onFatalError: void | ((error: mixed) => void),
): Request
function resumeRequest(
  children: ReactNodeList,
  postponedState: PostponedState,
  renderState: RenderState,
  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
  onAllReady: void | (() => void),
  onShellReady: void | (() => void),
  onShellError: void | ((error: mixed) => void),
  onFatalError: void | ((error: mixed) => void),
): Request 
function resumeAndPrerenderRequest(
  children: ReactNodeList,
  postponedState: PostponedState,
  renderState: RenderState,
  onError: void | ((error: mixed, errorInfo: ErrorInfo) => ?string),
  onAllReady: void | (() => void),
  onShellReady: void | (() => void),
  onShellError: void | ((error: mixed) => void),
  onFatalError: void | ((error: mixed) => void),
): Request
function resolveRequest(): null | Request
function resolveClassComponentProps(
  Component: any,
  baseProps: Object,
): Object 
function performWork(request: Request): void
function prepareForStartFlowingIfBeforeAllReady(request: Request)
function startFlowing(request: Request, destination: Destination): void
function stopFlowing(request: Request): void
function abort(request: Request, reason: mixed): void
function flushResources(request: Request): void
function getFormState(
  request: Request,
): ReactFormState<any, any> | null
function getResumableState(request: Request): ResumableState
function getRenderState(request: Request): RenderState
function getPostponedState(request: Request): null | PostponedState

运行时环境

支持下列环境

• node：node.js环境
• Edge：Cloudflare Workers / Vercel Edge / Deno
• Bun：Bun
• Browser：浏览器
• FB：Meta 内部 www + FB RSC 通道

调度微任务是scheduleMicrotask
调度宏任务是scheduleWork

渲染成字符串renderToString

其完整流程如下：

1. 创建Request：首先创建rootSegment，然后生成渲染任务RenderTask，并将其添加到Request请求的pingedTasks队列中。
2. 启动工作：调用startWork函数，通过scheduleMicrotask调度performWork任务。在Node.js环境下，微任务调度使用queueMicrotask，宏任务调度则使用setImmediate。
3. 开启流式输出：执行startFlowing，将request.destination设置为非空值，允许flushCompletedQueues()将已完成的completed segments转换为字节流输出，并建立背压闭环机制。

RenderTask执行

渲染任务的结构关系如下：

Node：为需要渲染的dom节点

其执行步骤包括：

• retryNode：重试节点处理，会区分节点类型，其支持的类型有
  • 对象，其支持的类型有
    • REACT_ELEMENT_TYPE
    • REACT_PORTAL_TYPE
    • REACT_LAZY_TYPE
    • 数组
    • 迭代函数
    • 异步迭代函数
    • 对象有then函数
    • REACT_CONTEXT_TYPE
  • 字符串
  • 数字
• pushSegmentFinale：推送段结束标记
• finishedSegment：完成段处理
• finishedTask：完成整个任务