陌上寒

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

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

一句话：react-hook-form（RHF）快的根本原因是「非受控（值留在 DOM）+ 按字段订阅 + formState 用 Proxy 做「按需订阅」」——所以它的核心能力不是「收集值」，而是「用 register/Controll...

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

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

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

一句话：好 API 的标准是「可预测、可组合、可渐进」——落到 React 上就是三件事：受控/非受控双模式（value + defaultValue）、用组合（children/Slots/Context）代替配置炸弹、以及用「多态 + ...

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

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

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

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

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

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

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

一句话：条件渲染靠「表达式」（三元、逻辑与、提前 return、映射表），列表渲染靠 map + 稳定唯一的 key；要小心 && 遇到 0 会渲染出 0 的陷阱。 一、条件渲染的五种写法 // ① 三元表达式：二选一 fu...

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

一句话：React 自己实现了一套合成事件（SyntheticEvent）系统，事件不绑在元素上而是委托到根容器统一处理；这带来了跨浏览器一致性与性能优势，也带来几个「与原生不一致」的细节（最典型的是 onChange 的行为）。 一、合成...

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

一句话：受控组件的「值」由 React 的 state 掌管（每次输入都要 setState），非受控组件的「值」由 DOM 自己掌管（需要时用 ref 去取）；选择标准是「你是否需要实时响应输入」。 一、受控组件 function Con...

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