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

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

setState 的「调用」是同步的,「应用更新并重新渲染」是批处理延后的——所以事件处理里读不到新值;React 18 起所有场景都自动批处理(不再有「异步回调里同步渲染」的例外)。

压缩、裁剪、加水印、抠图、拼接都在本地完成。不限张数、不限次数,图片不会传到服务器。

因为 React 用「链表 + 调用顺序」把每个 Hook 的状态存起来——Hook 的身份由「第几次调用」决定,一旦顺序或数量变化,状态就会「张冠李戴」。

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

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

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

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

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

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

Error Boundary 只能由类组件实现——依赖 static getDerivedStateFromError(渲染降级 UI)与 componentDidCatch(上报),并要提供「重置」能力;用「包装组件 + 函数式 fallback」可以让使用方是函数组件。
最新评论
读过书不知道欧·亨利的人少。教科书上选文有
这小生活不错呀
不错,必须顶一下!
看着你还在坚持,很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错!!!!
简洁实用,好文章!