React 文档
导读与全书目录表：见同目录 01-React 入门：简介·特性与设计范式.md 开头。
一、React 核心基础（入门与进阶）
1. React核心概念深度理解
虚拟DOM（VDOM）：原理、与真实DOM的区别、diff算法（key的作用、同级比较、分层比较）
Fiber架构：核心解决问题（栈协调器的缺陷）、工作流程（调度阶段Scheduler、协调阶段Reconciliation、提交阶段Commit）
React生命周期：类组件生命周期（挂载/更新/卸载全阶段）、函数组件生命周期（useEffect模拟，依赖项配置）
JSX本质：不是模板语言，是React.createElement的语法糖，编译过程与Babel的关系
2. 组件相关
组件类型：函数组件vs类组件（优缺点、适用场景）、纯组件（PureComponent）、高阶组件（HOC）、Render Props
组件通信：父子组件（props、回调函数）、跨层级组件（Context API、useContext，避免滥用场景）、兄弟组件（状态提升、事件总线）
组件复用：HOC与Render Props对比、自定义Hooks封装（复用逻辑的最佳实践）
3. Props与State
Props：只读性、默认值（defaultProps）、类型校验（PropTypes/TypeScript）、Props传递优化（memo浅比较）
State：不可变性（为什么不能直接修改state、immutable的应用）、setState特性（异步更新、批量更新、第二个回调函数）
状态管理区别：局部状态（useState）、全局状态（后续单独模块）
二、React Hooks（进阶核心）
1. 基础Hooks深度解析
useState：原理（闭包陷阱及解决方案、函数式更新的场景）、惰性初始化（避免重复计算）
useEffect：依赖项（空依赖、依赖具体值、无依赖的区别）、清除副作用（返回函数的执行时机）、避免无限循环的技巧
useContext：使用场景、性能优化（避免不必要的重渲染）、与Redux的结合
2. 高级Hooks应用与原理
useReducer：原理、与useState的区别、复杂状态管理场景（多状态联动）
useCallback：作用（缓存函数，避免子组件不必要重渲染）、依赖项配置、与memo的配合使用
useMemo：作用（缓存计算结果，优化渲染性能）、与useCallback的区别、使用误区（过度缓存）
useRef：作用（获取DOM元素、保存持久化值，不触发重渲染）、与useState的区别、闭包中的应用
3. 自定义Hooks与 Hooks 规则
自定义Hooks：命名规范（use开头）、封装原则（单一职责、可复用）、常见自定义Hooks（useRequest、useDebounce、useThrottle）
Hooks规则：只能在函数组件/自定义Hooks中使用、只能在顶层调用（不能在条件/循环/嵌套函数中）、 eslint-plugin-react-hooks的作用
Hooks底层原理：Hook链表、dispatcher机制、闭包与Hooks的关系
三、React性能优化（高级重点，体现能力）
1. 渲染优化
组件重渲染控制：React.memo（浅比较的局限性及解决办法）、useCallback、useMemo
避免不必要的渲染：拆分组件（细粒度组件）、避免props穿透、Context拆分（减少Context更新范围）
2. 代码与资源优化
代码分割：React.lazy + Suspense（路由级分割、组件级分割）、动态import()
资源优化：图片懒加载、路由预加载、第三方库按需引入（tree-shaking）
3. 高级优化手段
虚拟列表：react-window/react-virtualized（长列表优化，减少DOM节点）
memoization优化：reselect库（Redux状态缓存）、immutable.js（避免深层对象修改导致的重渲染）
性能监控：React DevTools Profiler（分析渲染瓶颈）、Lighthouse性能分析
四、React状态管理（高级必备，多方案对比）
1. Redux生态（核心重点）
核心原理：Store、Action、Reducer（纯函数要求）、Dispatch、中间件（Middleware）
Redux进阶：Redux Toolkit（RTK，简化配置，createSlice、createAsyncThunk）、不可变性（immer库的应用）
React-Redux：useSelector（选择器优化，shallowEqual）、useDispatch、Provider
常见问题：Redux性能优化（避免过度渲染）、异步操作（thunk、saga对比）
2. 其他状态管理方案
MobX：原理（响应式编程）、与Redux的区别、适用场景
Recoil/Zustand/Jotai：轻量级状态管理，解决Context痛点，适用中小型项目
状态管理选型：根据项目规模、团队熟悉度、性能需求选择（大型项目RTK，小型项目Zustand/Context）
五、React路由（React Router，常见要点）
1. 核心用法与原理
React Router v6核心API：BrowserRouter、Routes、Route、Link、Navigate、useNavigate、useParams、useLocation
路由模式：HashRouter vs BrowserRouter（区别、后端配置要求）
路由原理：前端路由实现方式（hashchange、popstate、history API）
2. 高级应用
路由守卫：导航守卫（useEffect监听location变化、自定义PrivateRoute私有路由）
路由嵌套与参数传递：动态路由（params）、查询参数（search）、state参数
路由优化：路由懒加载、路由预加载、404页面配置
六、React高级特性与实战
1. 高级特性
Suspense与React.lazy： Suspense的作用（等待异步组件加载、数据请求）、fallback属性
Error Boundary：错误边界原理、作用（捕获组件渲染错误，避免整个应用崩溃）、使用场景（class组件实现，函数组件无法直接实现）
Portals：原理（将组件渲染到DOM树的其他位置）、使用场景（模态框、弹窗）
Server Components（RSC）：核心概念、与客户端组件的区别、适用场景（提升首屏加载速度）
2. 实战场景问题
异步数据请求：useEffect+axios/fetch、React Query/SWR（数据缓存、请求重试、刷新）
表单处理：受控组件vs非受控组件、Formik/React Hook Form（表单验证、性能优化）
跨域问题：前端解决方式（代理配置、CORS）、与后端配合要点
移动端适配：React Native与React的区别、响应式布局实现（媒体查询、flex布局）
七、React周边生态与工程化
1. 工程化配置
构建工具：Vite vs Webpack（配置、性能对比，React项目适配）
TypeScript与React：TSX语法、组件类型定义（Props类型、State类型）、泛型组件
ESLint与Prettier：React代码规范（eslint-plugin-react、eslint-plugin-react-hooks）、格式化配置
2. 周边库应用
UI组件库：Ant Design、Material-UI（定制主题、按需引入、性能优化）
动画库：Framer Motion、React Spring（组件动画、过渡效果实现）
测试工具：Jest + React Testing Library（组件测试、Hook测试、集成测试）