陌上寒

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体系 阅读()去评论

React 19 围绕「表单与异步」补了一组 Hooks——use（在渲染期读 Promise / Context）、useActionState（管理提交结果与 pending）、useFormStatus（子组件读提交态）、useOptimistic（自动回滚的乐观更新）；

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

依赖数组的规则是「把副作用里用到的每一个响应式值都列进去」；三类错误是「漏依赖（逻辑错误）、多依赖（性能问题）、不稳定依赖（完全失效）」，而 exhaustive-deps 的警告几乎总是对的。

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

闭包陷阱（stale closure）指「函数捕获了某次渲染的变量快照，之后读到的永远是那个旧值」——它是 React 里最隐蔽也最常见的一类 bug，根因是「每次渲染都是一次新的函数调用」。

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