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

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

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

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

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

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

手写 useLocalStorage 要解决四件事——「惰性初始化(只读一次)」「序列化异常兜底」「跨标签页同步(storage 事件)」「SSR 兼容(没有 window)」。

手写请求 Hook 的关键是「状态机建模(idle/loading/success/error)+ 依赖触发 + 竞态取消(AbortController)+ 卸载清理」;进阶再加「手动触发、重试、防抖、回调」。

防抖(debounce)是「停止触发 N 毫秒后才执行」,节流(throttle)是「每 N 毫秒最多执行一次」;在 React 里封装成 Hook 的关键是「用 useRef 存定时器/时间戳」「清理函数里清掉」「用 useRef 保存最新回调」。

手写 useEffect 的核心是「用 Object.is 逐个比较依赖数组」——不同则「先执行上次的清理函数,再执行本次的 effect」;所有 effect 都在「组件渲染完成后统一执行」。

手写 useState 的关键是「用模块级数组 + 游标,按调用顺序存取每个 Hook 的状态」,并在 setState 后「触发组件重新渲染」——这正好解释了「为什么 Hooks 不能写在条件里」。
最新评论
读过书不知道欧·亨利的人少。教科书上选文有
这小生活不错呀
不错,必须顶一下!
看着你还在坚持,很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错!!!!
简洁实用,好文章!