从互联网整理而来

一、JS 基础前置

  1. 原型与原型链
  2. 闭包、闭包引发的内存泄漏场景
  3. 同步异步、宏任务微任务执行顺序
  4. Promise 状态、静态方法、链式调用
  5. async/await 原理
  6. 深浅拷贝实现与区别
  7. this 指向五种场景
  8. 箭头函数与普通函数差异
  9. ES6 解构、展开运算符、剩余参数
  10. var / let / const 区别
  11. CommonJS 与 ES Module 差异
  12. TypeScript 接口、泛型、交叉类型、联合类型
  13. EventLoop 完整执行流程
  14. 防抖节流实现原理
  15. 纯函数定义与特性

二、React 基础核心概念

  1. React 设计思想与核心理念
  2. 虚拟 DOM 是什么，作用与优势
  3. JSX 语法本质，编译产物
  4. JSX 中 {} 可放入哪些内容，不能放什么
  5. React 元素与组件区别
  6. 函数组件与类组件区别
  7. 纯组件 PureComponent 原理
  8. React 单向数据流含义
  9. props 只读特性，为什么不能直接修改
  10. props.children 有哪些类型
  11. key 的作用，为什么不能用 index 做 key
  12. React 列表渲染注意事项
  13. className 代替 class、htmlFor 代替 for 原因
  14. React 事件绑定与原生 DOM 事件差异
  15. 合成事件原理、事件委托机制
  16. 阻止合成事件冒泡几种方式
  17. dangerouslySetInnerHTML 使用场景与风险
  18. React 为什么不直接操作 DOM
  19. Fragment 作用，短语法 <>
  20. React 严格模式 StrictMode 作用

三、类组件生命周期（Class Component）

  1. 类组件完整生命周期分哪三个阶段
  2. constructor 执行时机与作用
  3. static getDerivedStateFromProps 执行时机与用途
  4. shouldComponentUpdate 返回值作用
  5. render 执行规则，禁止在其中修改 state
  6. componentDidMount 执行时机、常用场景
  7. getSnapshotBeforeUpdate 触发时机、返回值用途
  8. componentDidUpdate 参数含义，依赖判断写法
  9. componentWillUnmount 清理资源场景
  10. 废弃生命周期函数有哪些，为什么废弃
  11. props 变化触发的生命周期流程
  12. setState 同步还是异步，底层批量更新逻辑
  13. setState 两种传参形式（对象/函数）区别
  14. 多次连续 setState 合并规则
  15. 如何在 setState 后拿到最新 state

四、Hooks 全套（React16.8+）

  1. Hook 诞生背景，解决类组件什么痛点
  2. Hook 使用两条硬性规则
  3. useState 底层原理，为何数组解构不受顺序影响
  4. useState 传入函数初始化的优势
  5. useEffect 作用，依赖数组含义
  6. useEffect 模拟生命周期分别怎么写
  7. useEffect 返回清理函数执行时机
  8. 依赖数组漏传变量引发的闭包陷阱
  9. useLayoutEffect 和 useEffect 执行顺序、区别
  10. useMemo 缓存计算值，解决什么问题
  11. useCallback 缓存函数，搭配子组件使用场景
  12. useMemo 与 useCallback 性能误区
  13. useRef 存储DOM、存储可变数据两种用法
  14. ref 传递 forwardRef 使用场景
  15. useImperativeHandle 作用
  16. useContext 跨层级传值，使用缺陷
  17. useReducer 适用场景，和 useState 对比
  18. useReducer 简单实现思路
  19. useId 作用，解决什么问题
  20. useTransition 区分紧急/非紧急更新
  21. useDeferredValue 延迟计算值
  22. useSyncExternalStore 订阅外部数据源
  23. useDebugValue 自定义Hook调试展示
  24. 自定义 Hook 封装规范，复用逻辑思路
  25. Hook 闭包陷阱完整成因与解决方案

五、React18 新特性

  1. React18 并发渲染 Concurrent Mode 含义
  2. 自动批处理更新范围变化
  3. createRoot 替换 legacy root 差异
  4. Suspense 服务端/客户端用法
  5. Transitions API 解决场景
  6. 自动插入批处理，异步回调内也合并更新
  7. useTransition 与 useDeferredValue 区别
  8. 服务端组件 RSC 基础概念
  9. StrictMode 双重渲染机制目的
  10. 批量更新边界，何时不会合并state更新

六、Diff 算法与渲染更新

  1. React Diff 三大策略
  2. 同层比较，不跨层级对比原因
  3. 无key、index key、唯一key三种场景对比
  4. 节点删除、新增、移动判断逻辑
  5. 文本节点、组件节点 Diff 区别
  6. 列表 Diff 优化逻辑
  7. 什么情况下组件会重新渲染
  8. 如何避免不必要的重渲染
  9. memo、useMemo、useCallback 配合使用完整逻辑
  10. 渲染流程：render → 生成VNode → Diff → 真实DOM更新

七、组件通信方案

  1. 父子组件 props 传值、回调传方法
  2. 多层级透传 props 缺点
  3. Context API 跨层级通信优缺点
  4. Context 配合 useReducer 简易状态管理
  5. 父访问子组件实例 ref
  6. 子调用父方法回调函数
  7. 兄弟组件通信几种方案
  8. 全局事件总线实现与缺陷
  9. 跨页面全局状态管理方案对比

八、状态管理 Redux / Redux Toolkit / Zustand

  1. Redux 三大核心原则
  2. Redux 五大核心概念：Store、Action、Reducer、Dispatch、State
  3. Reducer 必须纯函数要求
  4. Action plain object 规范，为什么不能异步
  5. 中间件 middleware 作用，执行流程
  6. redux-thunk 异步处理原理
  7. redux-saga 对比 thunk 优势
  8. combineReducers 拆分模块原理
  9. react-redux 核心 API Provider、connect
  10. mapStateToProps、mapDispatchToProps 作用
  11. useSelector、useDispatch Hook 用法
  12. Redux 数据单向流动完整流程
  13. Redux Toolkit 解决原生Redux哪些痛点
  14. createSlice 内置 reducer、action 生成
  15. RTK 内置immer 实现可变写法原理
  16. RTK Query 接口缓存、请求管理
  17. Zustand 轻量状态库对比Redux优势
  18. 状态持久化 redux-persist 流程
  19. 大型项目状态库选型思路
  20. 多组件共享全局状态最佳实践

九、React Router v6

  1. v5 与 v6 核心改动差异
  2. createBrowserRouter 路由配置方式
  3. BrowserRouter、HashRouter、MemoryRouter 区别
  4. Routes 替代 Switch 作用
  5. Route element 传组件写法
  6. useNavigate 替代 useHistory
  7. 路由传参 params、search、state 三种方式
  8. useParams、useSearchParams 使用
  9. 嵌套路由 Outlet 占位原理
  10. index 索引路由作用
  11. Link、NavLink 区别
  12. 路由守卫鉴权封装方案
  13. 路由懒加载 + Suspense 配置
  14. useLocation 获取路由信息
  15. 动态路由、路由拦截封装

十、表单处理

  1. 受控组件与非受控组件定义、区别
  2. 受控组件完整实现思路
  3. 非受控组件通过 ref 获取值场景
  4. 多表单项统一封装受控逻辑
  5. 第三方表单库 Formik / React Hook Form 对比
  6. React Hook Form 非受控高性能原理
  7. 表单校验方案：原生、yup、zod
  8. 表单批量重置、回填数据处理

十一、样式方案

  1. inline 内联样式优缺点
  2. CSS Modules 样式隔离原理
  3. styled-components CSS-in-JS 原理
  4. emotion 与 styled-components 对比
  5. tailwindcss 在React项目使用优势
  6. 动态样式几种实现方式
  7. 全局样式污染解决方案

十二、工程化构建

  1. Create React App 底层 webpack 配置
  2. Vite 构建React项目优势，esbuild预构建
  3. vite.config.js 常用配置项
  4. webpack 处理jsx、ts-loader流程
  5. babel 转换 JSX、polyfill 原理
  6. .env 环境变量区分开发/测试/生产
  7. 跨域代理 proxy 配置
  8. 路由懒加载分包代码分割
  9. Tree-Shaking 生效条件
  10. 打包体积优化手段
  11. 第三方组件库按需引入配置
  12. unplugin-auto-import 自动导入hooks

十三、网络请求封装

  1. axios 请求拦截、响应拦截封装
  2. 全局 loading、统一错误处理
  3. token 过期无感刷新实现逻辑
  4. 重复请求取消方案 CancelToken
  5. 请求并发处理
  6. 封装自定义请求Hook
  7. SWR / React Query 数据请求缓存库原理
  8. React Query 自动重请求、缓存失效策略

十四、性能优化专题

  1. 组件无效重渲染全部诱因
  2. memo 缓存函数组件条件
  3. useCallback 缓存函数使用场景
  4. useMemo 缓存计算结果适用场景
  5. 列表渲染优化策略
  6. 虚拟列表 react-window / react-virtualized 原理
  7. 图片懒加载实现
  8. 路由懒加载分包优化首屏
  9. 大组件拆分、状态下沉优化
  10. 避免在render内创建函数/对象
  11. React DevTools Profiler 排查卡顿
  12. 减少Context频繁更新范围
  13. 定时器、订阅事件组件卸载清理
  14. 打包体积压缩：gzip、剔除无用依赖
  15. 并发更新优化用户交互体验

十五、进阶底层原理

  1. Fiber 架构解决旧架构什么问题
  2. Fiber 节点结构、任务拆分机制
  3. 协调阶段、提交阶段分工
  4. 可中断、可恢复、可优先级调度原理
  5. 调和过程完整流程
  6. 批量更新实现机制
  7. 合成事件系统底层池化机制
  8. React 事务机制
  9. Portal 传送门实现原理，事件冒泡特点
  10. ErrorBoundary 错误捕获范围，无法捕获哪些错误
  11. React 服务端渲染 SSR 流程
  12. Next.js 与 CRA 区别，SSR/SSG/ISR 概念
  13. Hydrate 水合作用，水合不匹配成因
  14. RSC React Server Components 运行机制
  15. 微前端中 React 应用隔离方案

十六、项目实战场景题

  1. 项目目录分层架构设计
  2. 状态管理选型理由
  3. 大型表单封装思路
  4. 页面按钮、接口权限控制实现
  5. 首屏加载缓慢优化方案
  6. 列表大量数据渲染卡顿解决
  7. 全局弹窗、消息提示封装
  8. 路由鉴权、未登录跳转逻辑
  9. 组件复用抽离自定义Hook规范
  10. 线上报错捕获监控方案
  11. 多环境变量、多渠道打包配置
  12. 防抖节流在搜索框场景实现
  13. 页面返回保留表单状态实现
  14. 重复提交接口拦截处理
  15. React 项目迁移 TS 改造思路