陌上寒

先分清「客户端状态」与「服务端状态」——前者用 useState / Context / Zustand / Redux，后者用 TanStack Query / SWR；不是所有共享数据都该进全局 store。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

React 的复用手段有五种——children 透传（最常用）、props 传元素（具名插槽）、复合组件（命名空间）、render props、HOC（历史方案）；核心思想是「用组合代替继承」。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

Context 的 value 一旦变化，所有消费者都会重渲染（React.memo 拦不住）——解法优先级是「拆分 Context → useMemo 稳定 value → 值与操作分离 → children 透传 → 改用带选择器的状态库」。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

Context 是 React 提供的「依赖注入 / 跨层级读取」机制——它让你把值放在祖先组件上，任意深度的后代都能直接读取，从而消除「props 层层透传」。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

状态应该放在「需要它的最近的公共祖先」——这就是「状态提升」；而「单一数据源」要求「同一个数据只有一个拥有者」，否则会出现不同步的 bug。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

React 的数据流是单向的——数据通过 props 向下传递，子组件通过调用父组件传来的回调向上通知；兄弟组件之间靠「把状态提升到公共父组件」通信。

赞(0)陌上寒2026-10-1303-组件通信与状态管理 阅读()去评论

Hook 的开销分三类——「调用开销（链表节点访问，常量级）」「依赖比较（逐项 Object.is，与依赖数量成正比）」「闭包与对象创建（内存分配）」；单次调用通常是纳秒级，真正的成本来自「渲染次数 × 每次渲染里的分配」——所以优化顺序永远是「先减少渲染次数」，而不是「先减少 Hook 数量」。

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

useDebugValue 让自定义 Hook 在 React DevTools 的 Hooks 面板里显示「有意义的值」而不是一串 undefined——它是开发专用的标注工具，配合「命名规范 + DevTools + 渲染审计工具」构成 Hook 的完整可观测体系。

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

useInsertionEffect 是为 CSS-in-JS 库设计的第三个 Effect——它在「DOM 变更之前」同步执行，让「运行时生成的样式」赶在「浏览器计算布局」之前进入样式表，从而避免「额外一次重排」与「样式闪烁（FOUC）」。

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

useEffectEvent 解决的是一个长期无解的矛盾——「Effect 里需要读到最新的 props/state，但又不想因此重建副作用」；它返回一个「引用永远稳定、内部永远读到最新值、且只能从 Effect 里调用」的函数。

赞(0)陌上寒2026-10-1202-Hooks体系 阅读()去评论