陌上寒

这两个 Hook 是「引用稳定工具」，它们的成本（比较依赖 + 保存缓存 + 维护依赖数组）在「轻量计算」上会超过收益——只在「配合 memo」或「计算确实昂贵」时才值得用。

赞(0)陌上寒2026-10-1405-性能优化 阅读()去评论

React.memo 是一个「高阶组件」，它对 props 做浅比较（Object.is 逐项），相等就跳过该组件的重渲染——但它只在所有 props 引用都稳定时才生效，而且拦不住 Context 更新。

赞(0)陌上寒2026-10-1405-性能优化 阅读()去评论

优化前必须先测量——用 React DevTools Profiler 找到「哪些组件渲染次数多、耗时长、为什么渲染」，再用浏览器 Performance 面板看非 React 的部分（布局、绘制、长任务）。

赞(0)陌上寒2026-10-1405-性能优化 阅读()去评论

一次更新的完整链路是「updateContainer 建更新 → scheduleUpdateOnFiber 标记 + 调度 → ensureRootIsScheduled 选优先级并交给 Scheduler → performConcurrentWorkOnRoot 在时间片里跑 workLoop…

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论

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

赞(0)陌上寒2026-10-1404-渲染机制与原理 阅读()去评论