陌上人如玉
公子世无双

04-渲染机制与原理

React 渲染机制与底层原理:虚拟 DOM、Fiber 架构、Diff 策略、key、重渲染范围、批处理、并发渲染与合成事件,深入 React 18/19 与源码走读。
4.16 Suspense 的调度语义-陌上寒

4.16 Suspense 的调度语义

Suspense 不只是「显示 fallback」——它背后是一套调度机制:挂起会被登记为「挂起的车道(suspendedLanes)」并监听 promise 完成(ping),而是否显示 fallback 取决于「这次更新是不是 transition」(transition 中挂起会保留旧内容)。

赞(0)陌上寒陌上寒阅读()去评论
4.15 React Compiler 深入-陌上寒

4.15 React Compiler 深入

React Compiler 是一套「把 React 代码降到一个可分析的中间表示(HIR + SSA),识别出『哪些计算依赖响应式输入』,再自动插入 useMemoCache 读写」的编译管线——它的核心概念是「Reactive Scope(响应式作用域)」,而不是「给每个变量加 useMemo」…

赞(0)陌上寒陌上寒阅读()去评论
4.14 Partial Prerendering(PPR)-陌上寒

4.14 Partial Prerendering(PPR)

PPR 把「页面级的静态/动态取舍」变成「页面内部的取舍」——构建时预渲染出「静态外壳」,请求时立刻从 CDN 返回它,同时把标记为「洞(holes)」的动态部分流式填充进去;于是「TTFB 像 SSG,数据像 SSR」。

赞(0)陌上寒陌上寒阅读()去评论
4.13 Activity / Offscreen-陌上寒

4.13 Activity / Offscreen

(内部代号 Offscreen)解决的是「既要隐藏、又要保留状态、还要别浪费资源」这个三方矛盾——它在 mode="hidden" 时会「卸载副作用(清理清理函数)但保留 state」,而不是像条件渲染那样把整个组件扔掉。

赞(0)陌上寒陌上寒阅读()去评论
4.12 Server Components 深入-陌上寒

4.12 Server Components 深入

Server Components 的本质是「组件在服务端执行,产出的不是 HTML,而是一份可流式传输的『UI 描述』(Flight payload)」——客户端拿到它之后,才把这份描述渲染成 DOM;它与 SSR 回答的是两个不同问题,因此可以叠加使用。

赞(0)陌上寒陌上寒阅读()去评论
4.11 React 19 新特性-陌上寒

4.11 React 19 新特性

React 19 的主线是「把异步与表单做成一等公民」——Actions(useActionState / useFormStatus / useOptimistic)、use API、ref 作为普通 prop、文档元数据提升;

赞(0)陌上寒陌上寒阅读()去评论
4.10 React 18 新特性-陌上寒

4.10 React 18 新特性

React 18 的主线是「并发渲染」——配套 createRoot、自动批处理、useTransition/useDeferredValue/useId/useSyncExternalStore、Suspense 的 SSR 改进,以及 StrictMode 更严格的行为。

赞(0)陌上寒陌上寒阅读()去评论
4.9 合成事件系统-陌上寒

4.9 合成事件系统

React 自己实现了一套合成事件(SyntheticEvent)系统——事件统一委托到根容器、跨浏览器行为一致、与 React 的更新机制协同;React 17 起委托目标从 document 改为根容器。

赞(0)陌上寒陌上寒阅读()去评论
4.8 并发渲染-陌上寒

4.8 并发渲染

并发渲染(Concurrent Rendering)不是多线程,而是「渲染过程可以被中断、可以被丢弃、可以按优先级调度」——它让紧急更新(如输入)不被长渲染阻塞,也是 useTransition、useDeferredValue、Suspense 的基础。

赞(0)陌上寒陌上寒阅读()去评论