React之服务端渲染ReactFizzServer

简介

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

相关接口

functionstartWork(request:Request):voidfunctioncreateRequest(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>,):RequestfunctioncreatePrerenderRequest(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),):RequestfunctionresumeRequest(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),):RequestfunctionresumeAndPrerenderRequest(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),):RequestfunctionresolveRequest():null|RequestfunctionresolveClassComponentProps(Component:any,baseProps:Object,):ObjectfunctionperformWork(request:Request):voidfunctionprepareForStartFlowingIfBeforeAllReady(request:Request)functionstartFlowing(request:Request,destination:Destination):voidfunctionstopFlowing(request:Request):voidfunctionabort(request:Request,reason:mixed):voidfunctionflushResources(request:Request):voidfunctiongetFormState(request:Request,):ReactFormState<any,any>|nullfunctiongetResumableState(request:Request):ResumableStatefunctiongetRenderState(request:Request):RenderStatefunctiongetPostponedState(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：完成整个任务