- 001入门界面 = f(state):React 概述与环境搭建从「界面 = f(state)」这个函数式等式认识 React:组件是返回 JSX 的函数、用 Vite react 模板搭起项目、跑通并修改第一个组件;JSX 是 JS 扩展而非模板语言、与 Vue 模板的一句对照,附 default 导出缺失与 Objects are not valid as a React child 调试实录。
- 002入门组件与 Props:把页面拆成一堆函数从「战绩榜五个玩家手写五遍」讲起:函数组件的定义与组合、props 只读契约、children 插槽、列表渲染与 key、渲染时组件函数被调用并返回界面描述,附 Each child in a list should have a unique key 与小写组件名两则调试实录。
- 003入门状态与事件:按钮点一下,数字要变从「按钮点了数字纹丝不动」讲起:useState 三件套(当前值、setter、重渲染)、事件处理与合成事件直觉、函数式更新、不可变更新与引用比较、受控输入最小表单,附 Too many re-renders 无限循环调试实录。
- 004入门状态结构与摆放状态该放在哪个组件、何时提升(Lifting State Up)、派生值为何不该存进 state、以及用 key 重置子树——配合阅读器/书架场景的三组贯穿示例与动手实践。
- 005中级Hooks 深入useMemo、useCallback、useContext、useState、自定义 Hook、Hooks 规则与常见陷阱;useEffect 与 useRef 已拆为专篇。
- 006入门useReducer 与状态逻辑抽取把「怎么变」从组件里抽出来:useReducer 三件套、action 语义化、reducer 纯函数纪律与 reducer + Context 组合模式。
- 007入门Effect 生命周期与「你可能不需要 Effect」依赖数组语义、清理函数时序、useEffectEvent,以及官方反模式判例:链式 state、派生数据进 Effect、事件逻辑误放 Effect。
- 008入门Refs 与命令式逃生舱ref 与 state 的选择、useRef 三种用途、ref 回调、useImperativeHandle 定制曝光面,以及 React 19 的 ref 即 prop。
- 009中级Context 与全局状态Context API、Provider 模式、useContext 优化与状态机;第三方状态管理库的横向对比与选型见状态管理方案对比篇。
- 010进阶React 19 新特性用 FANDEX 岛屿与一个评论表单的真实场景学会 React 19 核心新特性:use()、Actions、useActionState、useFormStatus、useOptimistic,以及 RSC、流式 SSR 与文档元数据。
- 011入门React Router 路由React Router v7 的路由配置、嵌套布局、loader/action 路由级数据加载与路由 hook 速查——原 RouteDataFetch 篇的路由主题重构,SWR/React Query 已拆至客户端数据获取篇。
- 012入门客户端数据获取与缓存SWR 与 TanStack Query 的缓存心智模型:stale-while-revalidate、请求去重、mutate 与缓存失效、分页无限滚动与乐观更新,以及手写 useEffect fetch 的竞态问题——文章列表、搜索联想、评论乐观发送三例贯穿。
- 013进阶性能优化:先测量,再动刀从 FANDEX 收藏夹页「敲字全页卡、首屏包大、滚动掉帧」三宗罪讲起:用 Profiler 定位无关重渲染,memo 与稳定引用配套修复,lazy 加 Suspense 做代码分割,@tanstack/react-virtual 治长列表,附 memo 失效三连与 useMemo 滥用两则调试实录。
- 014中级Lint、格式化与项目结构React 项目的代码规范底座:ESLint 扁平配置、Prettier、Hooks 专项规则与功能模块化项目结构、命名与导入规范。
- 015进阶Next.js 全栈开发Next.js 全栈拼图:Server Actions、中间件、API Routes、数据库集成、认证与部署。
- 016中级JSX 深度解析JSX 语法原理与编译过程:标签即函数调用、属性命名差异、表达式插值边界与工具链选项。
- 017入门条件渲染与保持组件纯粹三元、逻辑与、提前 return 的取舍;&& 短路渲染出 0 的经典陷阱;保持组件纯粹与 StrictMode 双跑验证。
- 018进阶Fiber 架构:渲染为什么能随时停下从命令面板敲字卡顿讲起:用 mini 工作循环亲手感受时间切片,再拆解 Fiber 节点链表、双缓冲、Render 与 Commit 两阶段、Scheduler 调度与 Lanes 优先级,附「渲染期副作用」与「key 不稳定」两则调试实录。
- 019进阶Concurrent 模式:让慢更新别拖住快交互从全站搜索页「敲字卡 + 切页闪」讲起:useTransition 拆分紧急与非紧急更新、useDeferredValue 与选型规则、Suspense 挂起与防 fallback 闪烁、tearing 与 useSyncExternalStore、自动批处理与 flushSync,附受控输入延迟与 transition 副作用两则调试实录。
- 020进阶Hooks 原理:状态藏在 Fiber 的链表里从「Rendered fewer hooks than expected」崩溃实录讲起:用 30 行 mini useState 亲手验证「按顺序认人」,再对照真实结构——Fiber 上的 hook 链表、环形更新队列、effect 环链与 Object.is 比较,附闭包陷阱四种修法与 useEffectEvent。
- 021中级自定义 Hooks 设计模式:把逻辑抽成可复用的函数从给 FANDEX 前端实验室加「执行计时器、断点感知、搜索防抖」讲起:手写 useInterval 掌握稳定引用模式,总结「第二遍出现才抽、单一职责、稳定返回」的设计四问,再用 useMediaQuery 与 useDebouncedCallback 演练 SSR 安全与 cancel/flush,附 renderHook 测试与 ref 冒充 state 的调试实录。
- 022入门自定义 Hook 进阶配方:交互订阅、外部 Store 与 Hook 测试与 160 篇配套的配方库:useClickAway 与 useIntersectionObserver 处理点击外部与视口曝光,useEvent 模式与 usePrevious 稳定引用,createStore 加 useSyncExternalStore 写最小外部状态,renderHook 与 act 组成的 Hook 测试模板,以及 Hook 库的目录、导出与 ESLint 配置。
- 023中级状态管理方案对比React 状态管理选型:useState/useReducer/Context 内置方案与 Zustand、Jotai、Redux Toolkit 的机制差异、渲染性能与 2025-2026 选型决策
- 024中级React 性能优化用「先测量再动手」的流程系统学习 React 性能优化:三层性能模型、重渲染的控制、长列表虚拟化、并发特性与 Web Vitals 守护,附 2026 年 React Compiler 时代的手写 memo 取舍。
- 025中级Portal 与命令式 DOM 操作从给 FANDEX 命令面板做弹层的场景学会 createPortal、Portal 的事件冒泡规则与 SSR 注意点,以及用 ref 做测量、滚动、ResizeObserver 等命令式 DOM 操作的正确姿势。
- 026中级React 错误边界错误边界(ErrorBoundary)完整指南:getDerivedStateFromError 与 componentDidCatch 的捕获范围、React 19 错误处理变化、react-error-boundary 生产用法与常见陷阱。
- 027入门React 表单处理React 表单完整指南:受控与非受控组件的取舍、校验策略、React 19 form action 与 useActionState/useFormStatus、复杂表单库选型与常见陷阱。
- 028中级React 与 TypeScriptReact + TypeScript 实战:Props 与事件类型、Hooks 泛型、Context 类型安全模式、React 19 类型系统变化(ref 即 prop、useRef 必传初始值、JSX 命名空间迁移)与常用类型速查。
- 029中级React 测试React 组件测试与 E2E 专篇:Vitest + Testing Library 技术栈、按角色查询的行为测试法、异步与网络 mock(MSW)、Hook 测试、Playwright 端到端测试、常见反模式与调试技巧。
- 030中级React 路由进阶React Router 7 进阶:createBrowserRouter 路由表与嵌套布局、loader/action 数据流、useNavigation 与 useRouteError、useFetcher 局部操作、懒加载与受保护路由。
- 031中级React 国际化React 国际化实战:i18next/react-i18next 完整接入、翻译键组织与插值复数、Intl API(Collator/NumberFormat/DateTimeFormat)、RTL 布局与语言切换持久化。
- 032中级React 动画React 动画分层指南:CSS 过渡/动画驱动、退场动画与卸载时机、motion(Framer Motion)与 WAAPI、rAF 循环与 React 渲染解耦、prefers-reduced-motion。
- 033中级React 服务端渲染React SSR 原理与工程实践:renderToString 与流式渲染、水合与选择性水合、SSR/SSG/ISR/RSC 的区别。
- 034中级React 设计模式React 组件设计模式:组合优于继承、受控/非受控、复合组件(Compound Components)、Provider 组合、HOC 与 render props 的历史定位、Context 精确订阅。
- 035进阶React 与 WebAssemblyReact 集成 WebAssembly 实战:WASM 适用边界、instantiateStreaming 加载与 React 生命周期、懒加载与模块缓存、线性内存与 JS 数据传递、Rust 工具链与常见陷阱。
- 036中级React 与 WebSocketReact 接入 WebSocket 实战:Effect 生命周期与 StrictMode 双跑、自动重连与心跳、useSyncExternalStore 共享连接、消息状态化与常见陷阱(SSE 对比)。
- 037中级React 与 GraphQLReact 接入 GraphQL:查询语言最小集、fetch 裸调与 Apollo Client 完整接入、useQuery/useMutation 与缓存更新、分页策略、与 REST+TanStack Query 的选型对比。
- 038进阶React 与微前端React 微前端架构:适用场景与三大流派(Module Federation、single-spa/qiankun、iframe)、Webpack Module Federation 完整配置、共享 React 单例、样式与状态隔离、落地陷阱。
- 039中级React 无障碍React 无障碍实战:语义化 HTML 与 ARIA 分工、表单标注与错误播报、键盘导航与焦点管理(弹窗焦点圈禁)、aria-live 动态播报、jsx-a11y 与 jest-axe 工具链。
- 040中级React 与 PWAReact 渐进式 Web 应用实战:manifest 与安装条件、Service Worker 生命周期、缓存策略(cache-first/network-first/stale-while-revalidate)、vite-plugin-pwa 接入与版本更新提示。
- 041中级React 与 CanvasReact 集成 Canvas 绘图:命令式绘制的所有权边界、useRef + Effect 绘制流、rAF 动画循环与 React 渲染解耦、DPR 高清适配、ResizeObserver 响应式与指针交互画板示例。
- 042进阶React 与 D3React 集成 D3:两种所有权模型的取舍(React 管 DOM vs D3 管 DOM)、纯计算模块 + JSX 渲染的完整柱状图、d3-selection 更新模式、过渡动画与常见陷阱。
- 043中级React 与 StorybookReact 组件工作台 Storybook:CSF3 故事格式、args 与控件面板、文档自动生成、play 交互测试、a11y 与 MSW 插件、CI 集成与视觉回归。
- 044中级React 与 CI/CDReact 项目 CI/CD 实战:GitHub Actions 完整流水线(缓存、typecheck/test/build)、环境变量安全边界、Playwright E2E、预览部署、包体积预算与常见陷阱。
- 045进阶React 与 MonorepoReact Monorepo 实战:pnpm workspaces 依赖机制、workspace/catalog 协议、Turborepo 任务编排与缓存、React 单例与共享组件库打包、常见陷阱与选型建议
- 046进阶React Compiler 自动记忆化从删掉项目里 useMemo 的真实动机出发,学会 React Compiler(v1.0)的启用配置、编译产物原理、Rules of React 前提与渐进式迁移策略,理解 2026 年还需要不需要手写 memo。
- 047进阶Server Components 与 Client-ComponentsReact Server Components与Client Components界限划分与最佳实践。
- 048进阶Next.js App RouterNext.js App Router 详解:文件约定、布局与模板、并行/拦截路由、加载态、错误态与路由级数据获取。
- 049进阶React 19 新增 APIReact 19 及 19.x 后续新增 API 详解:use、useActionState、useOptimistic、ref 作为 prop、useEffectEvent、Activity 与资源加载。
- 050进阶并发渲染与可中断更新React 并发渲染原理:可中断的 Render 阶段、优先级插队、中断重做语义与 startTransition/useDeferredValue 的底层关系。
- 051入门错误监控与 Sentry生产环境错误监控:Sentry SDK 初始化与采样成本、Source Map 与 Release 让错误可定位、Breadcrumb 与 Replay 让错误可复现、全局兜底、React Router 与 Next.js 集成、告警运维——错误边界机制本身见错误边界篇。
- 052进阶自定义 Hooks 复用逻辑高频自定义 Hook 实现与设计准则:useFetch、useDebounce、useLocalStorage、useEventListener 的可运行实现与常见陷阱。
- 053入门React 的 Vite 工具链:脚手架现状与 vite.config.ts 实战讲清 React 脚手架的现在时:create-react-app 已退场,当前主流是 Vite(react 模板)与 Next.js 两条线;以 react-ts 模板拆解 @vitejs/plugin-react 与 Fast Refresh,覆盖 API 代理、VITE_ 前缀环境变量与三条命令的终端输出。
- 054进阶React 渲染优先级与调度React 如何决定"先渲染谁、能不能中断、中断后怎么办":Lane 优先级、Scheduler 时间片与 startTransition/useDeferredValue 的分工。
- 055中级Angular 精要与 React 对照用 React 的知识体系理解 Angular:组件三件套、Signals 响应式、依赖注入与全家桶生态的对应关系。
- 056中级React 学习总结:核心知识体系回顾串联 React 模块全部文档,回顾 Hooks 体系、Fiber 并发、服务端组件、状态管理与性能优化的核心脉络。