11-手写实现

浮层组件的难点不在渲染，而在定位——要算的是一套完整的中间件链：基础位置 → 翻转（flip，空间不够就换到对侧）→ 位移（shift，仍溢出就沿轴平移）→ 箭头（arrow，跟着指向目标）→ 隐藏（hide，目标不可见就收起来），再补上「跟随（ResizeObserver/scroll）、Port…

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

表单库的核心不是「收集输入值」，而是「一套细粒度的订阅模型 + 一个校验状态机」——难点集中在四处：受控/非受控统一、字段级订阅（而不是整表单重渲染）、异步校验的竞态、校验时机与提交状态机。

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

Zustand 的最小实现只有「一个闭包保存 state + 一个 Set 存监听器 + setState 做浅合并并通知」，React 侧靠 useSyncExternalStore + 选择器（带相等性比较与结果缓存） 订阅——关键难点不是 store 本身，而是「选择器返回新对象时的引用稳定」…

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

Suspense 的最小实现只有四步——组件在渲染中 throw 一个 thenable → 渲染器捕获它、向上找到最近的边界 → 把「正在等的 promise」记在边界上并让本次渲染作废（重渲染时边界就渲染 fallback）→ promise resolve 时「ping」一次触发重渲染；

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

写一个 mini React 只需要四块——createElement 造元素对象 → Fiber 树用「parent/child/sibling」三个指针串起来 → workLoop 用「全局指针 + 时间片」实现可中断的深度优先遍历 → commit 阶段把 Fiber 树同步落到 DOM，再加…

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

手写简易 diff 的目标是「理解 React 如何把两棵 vnode 树变成最小的 DOM 操作」——核心是「同层比较 + type 不同直接重建 + 用 key 匹配同一层数组」，把 O(n³) 降到 O(n)。

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

Error Boundary 只能由类组件实现——依赖 static getDerivedStateFromError（渲染降级 UI）与 componentDidCatch（上报），并要提供「重置」能力；用「包装组件 + 函数式 fallback」可以让使用方是函数组件。

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

无限滚动的推荐实现是「用 IntersectionObserver 观察一个列表底部的「哨兵元素」」——它比监听 scroll 事件更高效（不读布局、不频繁触发），配合 rootMargin 还能「提前触发」实现无感加载。

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

一个合格的 Modal 要处理五件事——「用 Portal 挂到 body」「焦点管理（移入 + 陷阱 + 归还）」「ESC 关闭」「滚动锁定（并还原）」「无障碍属性（role="dialog" + aria-modal）」。

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

虚拟滚动的核心是「只渲染可视区域内的几十个元素」，用「占位元素撑起总高度」+「translateY 偏移渲染层」——公式是「startIndex = floor(scrollTop / rowHeight)、visibleCount = ceil(containerHeight / rowHeigh…

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