陌上寒

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

读完《传习录》，我最大的感受不是学到了几个新概念，而是被王阳明逼到一个很难受的位置上：我不敢再说自己“知道”什么了。那些我以为早就明白的道理——孝顺、诚实、早睡、读书明理——在他那里统统不算数。他说得很干脆，知而不行，只是未知。这句话像一根...

赞(0)陌上寒2026-10-13阅读 阅读()去评论

Fiber 把 React 的渲染从「不可中断的递归」改造成「可中断的链表遍历」——每个 Fiber 节点是一个「工作单元」，带父子兄弟指针与优先级，从而支持时间切片、优先级调度与并发渲染。

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