陌上寒

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-渲染机制与原理 阅读()去评论

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

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

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

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

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

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

React 会把「同一个事件循环里发生的多次 setState」合并成一次渲染——这叫批处理；React 18 之前只在合成事件里批处理，React 18+ 在所有场景（含 setTimeout、Promise、原生事件）都自动批处理。

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

父组件重渲染时，子组件默认也会重渲染（因为父组件重新执行时会重新调用子组件函数/创建新元素）——想阻断必须用 React.memo（且 props 引用稳定）、children 透传或状态下移。

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

key 是 React 判断「新旧列表中的元素是否是同一个」的身份标识——它决定组件是「复用」还是「重建」；用 index 或随机值会在列表变动时造成状态错位或性能灾难。

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

React 的 diff 只做「同层比较」「类型不同直接重建」「用 key 标识同一元素」三件事，把理论上 O(n³) 的树比较降到 O(n)——代价是放弃「跨层复用」。

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

React 的一次更新分「render 阶段（可中断、必须纯、算出变更）」与「commit 阶段（不可中断、真正改 DOM、执行 effect）」；理解这个划分就理解了「为什么副作用必须放 Effect 里」。

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