深入探究 React
深入学习 React 核心概念、原理与最佳实践，包括组件设计、状态管理、性能优化、Hooks 原理等内容
文章列表
共 14 篇不仅仅是 HTML：JSX 的本质与虚拟 DOM 的演进
从“为什么 JSX 不能直接运行”这个痛点出发，拆开 Babel 转换链路，讲清 JSX/ReactElement 的本质、虚拟 DOM 解决的核心问题，以及它与 Fiber、Diff 的关系
状态的真谛：为什么我们不能直接修改 State？
从“我明明改了 state，界面却不更新”这个痛点出发，讲清不可变数据的意义、React 触发更新的依据、引用相等比较的底层逻辑，以及对象/数组更新的正确姿势
组件的灵魂：从 Class 生命周期到 Hooks 的思维转变
从“useEffect 到底什么时候执行、为什么会执行两次、cleanup 何时触发”这些高频困惑出发，把 Class 生命周期映射到 Hooks 的副作用模型，建立可推理的心智框架
从栈到链表：Fiber 架构是如何实现可中断渲染的？
从“为什么一次大更新会卡住页面”这个痛点出发，讲清 React 从递归栈渲染走向 Fiber 的必然性：可中断、可恢复、可优先级调度；并拆解 Fiber 节点结构与双缓存（current / workInProgress）
时间分片（Time Slicing）：React 如何保证界面的流畅度？
从“输入卡顿、滚动掉帧”这个体验问题出发，解释 React 为什么要把渲染拆成可中断任务：一帧 16.67ms 的预算、让出主线程的时机、render/commit 的可中断边界，以及优先级如何影响“先响应还是先渲染”
深度剖析 Diff 算法：React 是如何复用节点的？
从“列表一更新就乱跳、输入框错位、动画异常”这些真实 bug 出发，拆解 React Diff 的核心假设与策略：同层比较、单节点 Diff、多节点 Diff；讲清 key 的真实作用是“身份稳定”而非“性能开关”，以及为什么 index 当 key 会导致“复用错位”
闭包陷阱：为什么你的 Hooks 总是拿到旧的值？
从“为什么 useEffect / setInterval / 事件回调里总拿到旧 state”这个高频 Bug 出发，讲清渲染快照（snapshot）+ 闭包捕获的根因；系统对比 4 种解决方案：依赖数组、函数式更新、useRef、事件回调模式，并给出选择准则
自定义 Hooks 的艺术：逻辑复用的最优解
从“同一套副作用/请求/订阅逻辑在多个组件里重复粘贴”这个痛点出发，讲清自定义 Hooks 的设计边界、API 形状、依赖与闭包的正确处理方式，并给出 4 类高复用范式：数据请求、订阅监听、表单状态、缓存与派生
不止是状态管理：useReducer 与 useContext 的协作之道
从“跨层传参太痛、状态越来越乱、多个组件要协同更新”这些真实场景出发，讲清 useReducer 的可预测更新模型、Context 的作用域与性能特性，并给出一套可落地的组合范式：Reducer 驱动 + 分层 Context + 选择性订阅的优化策略
渲染的代价：如何避免组件的无效重绘？
从“父组件一更新，子组件全跟着重渲染”这个性能痛点出发，讲清 React 重渲染的真实触发条件，并系统对比 React.memo、useMemo、useCallback 的作用边界与常见误用；给出一套可推理的优化流程：先定位、再稳定引用、最后减少计算与渲染面积
批处理（Batching）：React 内部的性能自动挡
从“我连续 setState 了好几次，为什么只渲染一次/为什么读到的还是旧值”这些高频困惑出发，讲清 React 批处理的本质：把多次更新合并成一次渲染；对比 React 18 前后自动批处理覆盖范围；解释更新队列、渲染快照与函数式更新的关系，并给出可控地“合并/拆分更新”的实践建议
海量数据的挑战：虚拟列表与按需加载的实现
从“渲染 1 万行列表必卡、滚动掉帧、首屏白屏”这些硬性能问题出发，讲清虚拟列表的核心原理：只渲染可视区域、用占位撑开滚动高度、把 scrollTop 映射到起止索引；并深入动态高度、滚动锚点、预加载与按需加载的工程细节，最后给出一个可直接落地的 React 实现骨架
服务端渲染（SSR）的新篇章：从 Next.js 看 React Server Components
从“SSR 不是更快吗？为什么还会卡在 hydration？”这个痛点出发，厘清 SSR/SSG/ISR 的边界，再用 Next.js（App Router）视角讲清 React Server Components（RSC）的核心：组件分工模型改变、减少客户端 JS、支持流式渲染与更自然的数据获取；最后给出实践落地的拆分策略与常见坑
React 的状态管理哲学：从 Redux 到 Zustand 与 Recoil
从“到底该不该上状态库、该选哪个”这个长期争论出发，用 React 的设计哲学拆解状态管理的本质问题：共享范围、更新频率、可预测性与调试能力；对比 Redux（集中式 + 可追溯）、Zustand（轻量 store + selector）、Recoil（原子依赖图），并给出可落地的选型准则与迁移策略