跳到正文

React

13篇文章

2026. 10. 01 · 阅读约29分钟

React 应用的分层

跟着 Juntao Qiu 关于 React 模块化的文章,把支付页面拆成 view、model、data 三层。还整理了亲自运行示例仓库时发现的 useMemo 失效和 fetch 反复调用,以及什么时候该用这种结构的判断。

2026. 09. 21 · 阅读约26分钟

overlay-kit

把用全局状态保存模态框开关的代码换成一行 await,我得到了什么又失去了什么。顺着源码追踪 overlay-kit 的事件、reducer 与 openAsync 核心逻辑,并亲手测试重新打开的行为,直到发现它与文档不符之处。

2026. 06. 17 · 阅读约28分钟

Kalyx

整理了我为什么开发 React headless DatePicker Kalyx,以及它与 Ark UI、React Aria、react-day-picker 的区别。结合代码与实测,讲解 ISO 8601 UTC 值模型、基于 Intl 的夏令时处理和覆盖全部 IANA 时区的属性测试。

2026. 05. 18 · 阅读约29分钟

状态管理

本文把前端状态分为局部、全局、服务端、表单、URL、外部和守卫 7 类,分别梳理适合的工具与边界,最后归纳为创建状态之前要问的四个问题。

2026. 03. 28 · 阅读约19分钟

Toss Frontend Fundamentals 模拟考试第 2 期重构复盘

分享在 Toss Frontend Fundamentals 模拟考试第 2 期中重构会议室预订应用的经历。文中梳理单体组件的拆分方式、领域逻辑的提取过程,以及以测试为基础推进重构的完整步骤,并记录其中做出的取舍与复盘,供准备同类练习的开发者参考。

2026. 01. 04 · 阅读约25分钟

queryKey

梳理 TanStack Query 的 queryKey 管理方式如何从内联数组、常量对象、query key factory 演进到 v5 的 queryOptions,并从实践角度讨论编写规则、DataTag 类型推断与缓存失效模式。

2025. 12. 30 · 阅读约18分钟

queryKey 比较原理

梳理 TanStack Query 如何把每次渲染新建的 queryKey 数组判定为同一个键:hashKey 序列化如何改变键顺序、undefined、Map 等值,以及过滤器如何比较键的结构。

2025. 12. 03 · 阅读约21分钟

ErrorBoundary 放在哪里

在使用 React Router 与 TanStack Query 的页面里,用已安装的源码核对 ErrorBoundary 该放几个、放在哪里的标准:路由、屏幕、区域各自接收的错误与撤回方式,统一 fallback 的方法,以及重试条件。

2025. 11. 28 · 阅读约12分钟

重试按钮为什么不起作用

用已安装的源码核对在 react-error-boundary 的 fallback 上按重试却回到同一个 fallback 的三种情况:查询错误用 QueryErrorResetBoundary,渲染错误用 queryFn 里的检查,React.lazy 分块失败用刷新来解开。

2025. 11. 17 · 阅读约23分钟

错误的传播

把同一个错误从七个位置抛出去,只有四个能到达 ErrorBoundary。这篇文章用官方文档和本地安装的源码确认编译期、渲染与生命周期、服务端数据、页面切换、外部库、事件与异步分别传播到哪里。

2025. 05. 20 · 阅读约38分钟

彻底掌握 React Fiber

基于 React 源码,深入分析 React Fiber 架构,从 Stack Reconciler、Fiber 节点结构、双缓冲、Lane 优先级、Work Loop、Render 与 Commit Phase 到 Concurrent Features。

2025. 05. 15 · 阅读约12分钟

React 为什么使用 MessageChannel

结合 React 的 PR 记录与在 Chrome 中实测的 setTimeout 4ms 延迟,梳理 React Scheduler 为何不用 requestIdleCallback、requestAnimationFrame、setTimeout,而用 MessageChannel 调度工作。

2024. 08. 18 · 阅读约28分钟

Zustand,你到底为什么是 ProviderLess?

通过阅读源码深入探究 Zustand 无需 Provider 就能管理状态的原理。文中比较它与 React Context API 的差异,梳理基于模块作用域的 store 设计,以及 useSyncExternalStore 的订阅机制。