简介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|ReactFormStateany,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,):ReactFormStateany,any|nullfunctiongetResumableState(request:Request):ResumableStatefunctiongetRenderState(request:Request):RenderStatefunctiongetPostponedState(request:Request):null|PostponedState运行时环境支持下列环境nodenode.js环境EdgeCloudflare Workers / Vercel Edge / DenoBunBunBrowser浏览器FBMeta 内部 www FB RSC 通道调度微任务是scheduleMicrotask调度宏任务是scheduleWork渲染成字符串renderToString其完整流程如下创建Request首先创建rootSegment然后生成渲染任务RenderTask并将其添加到Request请求的pingedTasks队列中。启动工作调用startWork函数通过scheduleMicrotask调度performWork任务。在Node.js环境下微任务调度使用queueMicrotask宏任务调度则使用setImmediate。开启流式输出执行startFlowing将request.destination设置为非空值允许flushCompletedQueues()将已完成的completed segments转换为字节流输出并建立背压闭环机制。RenderTask执行渲染任务的结构关系如下RequestRenderTaskNodeSegmentNode为需要渲染的dom节点其执行步骤包括retryNode重试节点处理会区分节点类型其支持的类型有对象其支持的类型有REACT_ELEMENT_TYPEREACT_PORTAL_TYPEREACT_LAZY_TYPE数组迭代函数异步迭代函数对象有then函数REACT_CONTEXT_TYPE字符串数字pushSegmentFinale推送段结束标记finishedSegment完成段处理finishedTask完成整个任务
简介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|ReactFormStateany,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,):ReactFormStateany,any|nullfunctiongetResumableState(request:Request):ResumableStatefunctiongetRenderState(request:Request):RenderStatefunctiongetPostponedState(request:Request):null|PostponedState运行时环境支持下列环境nodenode.js环境EdgeCloudflare Workers / Vercel Edge / DenoBunBunBrowser浏览器FBMeta 内部 www FB RSC 通道调度微任务是scheduleMicrotask调度宏任务是scheduleWork渲染成字符串renderToString其完整流程如下创建Request首先创建rootSegment然后生成渲染任务RenderTask并将其添加到Request请求的pingedTasks队列中。启动工作调用startWork函数通过scheduleMicrotask调度performWork任务。在Node.js环境下微任务调度使用queueMicrotask宏任务调度则使用setImmediate。开启流式输出执行startFlowing将request.destination设置为非空值允许flushCompletedQueues()将已完成的completed segments转换为字节流输出并建立背压闭环机制。RenderTask执行渲染任务的结构关系如下RequestRenderTaskNodeSegmentNode为需要渲染的dom节点其执行步骤包括retryNode重试节点处理会区分节点类型其支持的类型有对象其支持的类型有REACT_ELEMENT_TYPEREACT_PORTAL_TYPEREACT_LAZY_TYPE数组迭代函数异步迭代函数对象有then函数REACT_CONTEXT_TYPE字符串数字pushSegmentFinale推送段结束标记finishedSegment完成段处理finishedTask完成整个任务
)
