陌上人如玉
公子世无双

11-手写实现 第2页

React 手写实现:手写 Hooks、防抖节流、虚拟列表、Modal、无限滚动、Error Boundary、简易 Diff 与状态管理,最终用约 300 行实现一个 mini React。
11.5 手写 useLocalStorage-陌上寒

11.5 手写 useLocalStorage

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

赞(0)陌上寒陌上寒阅读()去评论
11.4 手写 useFetch / useRequest-陌上寒

11.4 手写 useFetch / useRequest

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

赞(0)陌上寒陌上寒阅读()去评论
11.3 手写 useDebounce / useThrottle-陌上寒

11.3 手写 useDebounce / useThrottle

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

赞(0)陌上寒陌上寒阅读()去评论
11.2 手写 useEffect-陌上寒

11.2 手写 useEffect

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

赞(0)陌上寒陌上寒阅读()去评论
11.1 手写 useState / useReducer-陌上寒

11.1 手写 useState / useReducer

手写 useState 的关键是「用模块级数组 + 游标,按调用顺序存取每个 Hook 的状态」,并在 setState 后「触发组件重新渲染」——这正好解释了「为什么 Hooks 不能写在条件里」。

赞(0)陌上寒陌上寒阅读()去评论