2.19 Hook 性能剖析
Hook 的开销分三类——「调用开销（链表节点访问，常量级）」「依赖比较（逐项 Object.is，与依赖数量成正比）」「闭包与对象创建（内存分配）」；单次调用通常是纳秒级，真正的成本来自「渲染次数 × 每次渲染里的分配」——所以优化顺序永远是「先减少渲染次数」，而不是「先减少 Hook 数量」。
02-Hooks体系
React Hooks 体系：useState、useEffect、useRef、useContext、useMemo、useReducer 等内置 Hook 的原理与最佳实践，自定义 Hook、闭包陷阱与 React 19 新 Hooks。
陌上寒2.18 useDebugValue 与 Hook 可调试性
useDebugValue 让自定义 Hook 在 React DevTools 的 Hooks 面板里显示「有意义的值」而不是一串 undefined——它是开发专用的标注工具，配合「命名规范 + DevTools + 渲染审计工具」构成 Hook 的完整可观测体系。
图零：浏览器里的图片工具箱，文件不上传
压缩、裁剪、加水印、抠图、拼接都在本地完成。不限张数、不限次数，图片不会传到服务器。
2.17 useInsertionEffect 与 CSS-in-JS 原理
useInsertionEffect 是为 CSS-in-JS 库设计的第三个 Effect——它在「DOM 变更之前」同步执行，让「运行时生成的样式」赶在「浏览器计算布局」之前进入样式表，从而避免「额外一次重排」与「样式闪烁（FOUC）」。
2.16 useEffectEvent 与「读最新值而不重建」
useEffectEvent 解决的是一个长期无解的矛盾——「Effect 里需要读到最新的 props/state，但又不想因此重建副作用」；它返回一个「引用永远稳定、内部永远读到最新值、且只能从 Effect 里调用」的函数。
2.15 React 19 新 Hooks 与 Actions
React 19 围绕「表单与异步」补了一组 Hooks——use（在渲染期读 Promise / Context）、useActionState（管理提交结果与 pending）、useFormStatus（子组件读提交态）、useOptimistic（自动回滚的乐观更新）；
2.14 依赖数组的常见错误
依赖数组的规则是「把副作用里用到的每一个响应式值都列进去」；三类错误是「漏依赖（逻辑错误）、多依赖（性能问题）、不稳定依赖（完全失效）」，而 exhaustive-deps 的警告几乎总是对的。
2.13 闭包陷阱与 stale closure
闭包陷阱（stale closure）指「函数捕获了某次渲染的变量快照，之后读到的永远是那个旧值」——它是 React 里最隐蔽也最常见的一类 bug，根因是「每次渲染都是一次新的函数调用」。
2.12 自定义 Hook
自定义 Hook 是「把有状态的逻辑抽出来复用」的方式——它复用的是逻辑而不是状态（每个使用它的组件都有独立的状态）；命名必须以 use 开头。
2.11 useId 与 useSyncExternalStore
useId 生成「服务端与客户端一致的唯一 ID」（用于无障碍属性关联），useSyncExternalStore 提供「订阅外部数据源」的官方姿势（避免并发渲染下的撕裂问题）。
2.10 useTransition 与 useDeferredValue
两个 Hook 都基于「并发渲染」——把「不紧急的更新」降优先级，让「紧急更新（如输入回显）」先完成；useTransition 用于你主动触发的状态更新，useDeferredValue 用于被动接收的值。
- 1
- 2
- 共 2 页
最新评论
读过书不知道欧·亨利的人少。教科书上选文有
这小生活不错呀
不错，必须顶一下！
看着你还在坚持，很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错！！！！
简洁实用，好文章！