标签：React

两者都是「引用稳定工具」——useMemo 缓存计算结果，useCallback 缓存函数引用；它们的价值只在「配合 React.memo」或「计算确实昂贵」时才成立，滥用反而增加成本。

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

useContext 让组件跨越任意层级读取共享值，避免「层层透传 props」；但它的代价是「Provider 的 value 一变，所有消费者都会重渲染」——所以它适合「不常变化的共享值」，不适合高频变化的状态。

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

useRef 返回一个「在整个组件生命周期内保持同一引用」的对象，修改它的 .current 不会触发重渲染——因此它适合存「DOM 引用」与「与 UI 无关的可变值」。

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

useLayoutEffect 与 useEffect 的唯一区别是执行时机——前者在「DOM 更新后、浏览器绘制前」同步执行，后者在「绘制后」异步执行；需要「测量 DOM 并立即修正」以防闪烁时用前者。

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

useEffect 的语义是「把这个组件与某个外部系统同步起来」——它在渲染提交、浏览器绘制之后异步执行，通过依赖数组控制何时重新同步，通过清理函数保证「切换前先撤销上一次的同步」。

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

useState 的关键细节有三个——初始值传函数才是惰性求值、新值依赖旧值必须用函数式更新、设置相同值会「bailout」但仍可能渲染一次。

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

React 用链表按「调用顺序」存储每个组件的 Hooks 状态，因此 Hooks 必须在每次渲染中以完全相同的顺序、相同次数被调用——这就是「不能在条件/循环里写 Hook」的根本原因。

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

页面内的拖拽不要用 HTML5 Drag and Drop API（移动端基本不可用、无法做视觉跟随），而应该用 Pointer Events + setPointerCapture + touch-action 自己实现——核心是「一个 pointerId 贯穿全程、捕获指针、把移动换算成 tra…

赞(0)陌上寒2026-10-1201-React基础 阅读()去评论

React 里做动画的真正难点只有两个——「卸载动画」（组件一卸载，DOM 立刻消失，没机会播动画）与「位置变化动画」（元素从 A 位置跳到 B 位置，没有过渡）——前者用「延迟卸载 + 动画结束回调」，后者用「FLIP」；

赞(0)陌上寒2026-10-1201-React基础 阅读()去评论

在 React 里做测量有两个约束——「渲染阶段不能读 DOM」（否则破坏并发渲染的假设）与「读和写要分开」（混在一起会触发「强制同步布局」，也就是布局抖动）；而「尺寸/可见性/结构/性能」四类变化分别由 ResizeObserver / IntersectionObserver / Mutatio…

赞(0)陌上寒2026-10-1201-React基础 阅读()去评论