Core

React 核心

React 函数组件核心 API 全图谱：Hooks 体系、JSX/Virtual DOM、组件模式、Refs、Context、性能优化、并发特性、错误边界。覆盖 React 面试高频 API 的完整深度解析。

Topics

JSX 与 Virtual DOM

JSX 的本质——它是语法糖还是模板？Virtual DOM 如何工作？React 的 Fiber 架构和 diff 算法如何实现高性能渲染。

React 组件设计模式

HOC、Render Props、Compound Components、Controlled/Uncontrolled 等核心模式，以及组合优于继承的设计原则，是构建可复用、可维护 React 组件的工程基础。

React 组合模式

深入理解 React 中'组合优于继承'的实现：children prop、slot pattern、specialization pattern、render props 的实际使用场景，以及 HOC vs render props vs custom hooks 的取舍。

React 条件渲染

深入理解 React 中三种条件渲染写法的机制差异，&& 运算符的 falsy 值陷阱，早期 return vs 条件渲染的工程选择，以及条件渲染在面试中的高频考点。

React Context 深入理解

深入理解 React Context 的工作机制、性能陷阱、以及如何通过拆分 Context 和选择器模式来优化 Context 的使用。

React 受控组件与非受控组件

深入理解受控组件与非受控组件的概念，什么时候用哪种模式，受控/非受控混用的场景，以及为什么 React 推荐受控组件。

React useDeferredValue

深入理解 useDeferredValue 的基本用法，与 useTransition 的本质区别，典型应用场景，以及使用时需要注意的工程判断。

React DevTools Profiler

深入理解 React DevTools 的 Components 和 Profiler 面板，学会读取火焰图、分析 render 次数和耗时，识别性能瓶颈并进行优化。

React 错误边界

深入理解 React 16 引入的错误边界机制：componentDidCatch 和 getDerivedStateFromError 的区别、错误边界的限制场景、生产环境实践。

React 事件系统

深入理解 React 的合成事件（SyntheticEvent）实现原理、React 17 前后的事件委托变化、事件分类、event pooling，以及在异步操作中使用事件的注意事项。

React 表单处理

深入理解 React 表单的两大处理模式：受控组件与非受控组件，掌握 React Hook Form 的核心用法，理解何时该用非受控组件，以及表单提交与数据处理的工程实践。

React Hooks 深度掌握

useState/useEffect/useRef/useCallback/useMemo/useContext/useReducer 完全掌握，custom Hooks 设计模式，Hooks 规则背后的原理，以及 Hooks 与类组件生命周期的对应关系。

React 生命周期

深入理解 React class component 生命周期：mount → update → unmount 完整流程，以及 Hooks 如何替代生命周期方法。

React List Keys

深入理解 React 中 key 的作用机制：diff 算法的关键输入、为什么不能用 index、key 的唯一性范围，以及如何生成稳定可靠的 key。

React 性能优化：memo 与 PureComponent

深入理解 React.memo 的实现原理（浅比较 props）、PureComponent 的 shouldComponentUpdate 自动浅比较、自定义比较函数，以及 memo 与 useMemo 的区别和避免过早优化的代价。

React New Features 17-18

深入理解 React 17 和 React 18 的重大变化：新 JSX 变换、事件委托变更、Automatic Batching、Concurrent Rendering、Suspense SSR 改进，以及 startTransition、useDeferredValue 等新 API。

React 性能优化技术

深入理解 React 性能优化技术：记忆化、懒加载、虚拟列表、防抖节流、以及如何正确测量性能。

React 性能反模式

深入理解常见的 React 性能反模式：内联函数作为 props、创建新的对象和数组、无效的 memo 使用、以及其他导致性能问题的代码模式。

React Portal 与 Dialog

深入理解 React Portal 在 Dialog/Modal 中的应用：焦点 trapping、滚动锁定、无障碍访问、以及常见的模态框实现模式。

React Portals and Fragments

深入理解 React Fragment 的用途和与空标签的区别，以及 React Portal 的使用场景、createPortal API、事件冒泡处理和 CSS 层叠上下文外的表现。

React 协调与 Fiber 架构

深入理解 React 的协调算法、Fiber 架构的设计动机、以及 React 如何决定更新哪些 DOM 节点。

React useReducer 高级模式

深入理解 useReducer 的高级用法：复杂状态形状、reducer 组合、Context 配合、以及与 Redux 模式的关系。

React Refs

深入理解 useRef 的本质是 mutable container，掌握 createRef vs useRef 的区别，理解 forwardRef 的 ref 穿透机制，以及 useImperativeHandle 的自定义暴露控制。

React Router 与路由设计

React Router v6 完整路由体系：声明式路由、嵌套路由、路由参数、编程式导航、路由守卫、延迟加载，以及 SPA 路由的实现原理。

React 服务端组件

RSC 解决的问题、为什么需要服务端组件、服务端组件 vs 客户端组件的边界、Server Component 和 Client Component 的通信方式，以及流式 SSR 和 React 18 的结合。

React 状态管理

从 Redux 核心到 Zustand 轻量方案，再到 Jotai 原子化和 TanStack Query 数据获取——按状态类型和团队规模判断如何选择状态管理方案。

React Suspense 与并发特性

Suspense 机制原理、Concurrent Mode 的 startTransition 和 useDeferredValue、并发渲染的可中断性（Fiber 架构回顾），以及如何正确使用 Suspense 和并发特性。

React useId

深入理解 useId 的基本用法、稳定 ID 生成机制，SSR 水合不匹配问题的解决，以及在 ARIA 无障碍属性中的正确应用。

React useInsertionEffect

深入理解 useInsertionEffect 的执行时机，为什么它主要是给 CSS-in-JS 库用的，以及普通业务组件几乎不需要它的原因。

React useLayoutEffect

深入理解 useLayoutEffect 与 useEffect 的本质区别，同步 vs 异步的执行时机，以及在 DOM 测量、SSR 等场景下的正确使用方式。

React useSyncExternalStore

深入理解 useSyncExternalStore 的基本 API，外部 store 订阅机制，以及为什么在并发渲染下需要这个 API 来避免 tearing 问题。

React useTransition

深入理解 useTransition 的紧急更新与非紧急更新概念，基本 API 用法，典型应用场景，以及它与 setTimeout 的本质区别。

React 核心

React 是当前最主流的前端 UI 框架。这个模块覆盖 React 函数组件时代的所有核心 API，从最基础的 useState 到 React 18 的并发特性。

按照面经频率，这些 API 可以分成几个优先级：

第一梯队（必熟）：useState、useEffect、useRef、useMemo、useCallback、useContext、createContext、useReducer、React.memo、key

第二梯队（中高级常问）：forwardRef、useImperativeHandle、useLayoutEffect、useTransition、useDeferredValue、createPortal、custom Hooks

第三梯队（理解即可）：useId、useSyncExternalStore、useInsertionEffect、Error Boundary、类组件生命周期

React 的 API 设计有一条主线：让 UI 成为状态的函数。理解这一点，很多 API 的设计意图就清晰了——state 驱动渲染，effect 同步副作用，ref 提供命令式入口，context 解决跨层传值，memo 避免不必要的渲染。

这个模块按这条主线组织：从组件基础（JSX、props、渲染）→ 状态管理（useState、useReducer）→ 副作用（useEffect、useLayoutEffect）→ 引用与命令式（useRef、forwardRef）→ 上下文（useContext）→ 性能（useMemo、useCallback、React.memo）→ 并发（useTransition、useDeferredValue）→ 边界情况（Error Boundary）。

每个 topic 都从 API 是什么开始，讲清楚解决什么问题、怎么用、面试怎么问、容易踩什么坑。