01-React基础

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

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

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

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

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

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

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

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

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

/ Pop…

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

好 API 的标准是「可预测、可组合、可渐进」——落到 React 上就是三件事：受控/非受控双模式（value + defaultValue）、用组合（children/Slots/Context）代替配置炸弹、以及用「多态 + 泛型 + Headless」保留扩展空间。

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

ref 是「绕过 React 数据流直接访问 DOM 或保存可变值」的手段；访问 DOM 要用 useRef + ref={ref}（函数组件不能直接接收 ref，需要 forwardRef，React 19 起可以直接接收）。

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

三个「特殊组件」分别解决三类问题——Fragment 解决「需要多个根节点又不想多一层 DOM」、Portal 解决「弹层需要脱离父级容器」、StrictMode 在开发环境暴露潜在的副作用问题。

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

React 里处理表单有两条路——受控表单（state 驱动，适合实时校验与联动）与非受控 / FormData（提交时收集，代码更少）；React 19 的 form action 进一步把「提交 + loading + 错误」统一成一套模式。

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

条件渲染靠「表达式」（三元、逻辑与、提前 return、映射表），列表渲染靠 map + 稳定唯一的 key；要小心 && 遇到 0 会渲染出 0 的陷阱。

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