标签：React

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基础 阅读()去评论

react-hook-form（RHF）快的根本原因是「非受控（值留在 DOM）+ 按字段订阅 + formState 用 Proxy 做「按需订阅」」——所以它的核心能力不是「收集值」，而是「用 register/Controller 统一非受控与受控、用 resolver 接 zod/yup、用…

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

Portal 的本质是「DOM 位置搬家，React 树位置不变」——它解决了「脱离父级裁剪」的问题，却引出「层级（z-index）失控」的新问题；治理层级的正解是「分层基数 + 栈式申领 + 固定 Portal 容器」，更现代的做法是直接上浏览器的 top layer（

/ Pop…

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