说明：标题提到的React 19在本文写作时（2023年3月）尚未发布（React 19于2024年发布）。

本文基于我参加的React面试经历，整理了常见的React面试题，以及对React 19新特性的预期问题，分享我的回答思路和准备建议。

一、基础题

1. React的核心思想是什么？

这是最基础的问题。

回答思路：

  • 组件化：把UI拆成可复用的组件
  • 声明式：描述UI应该是什么样，而不是怎么操作DOM
  • 单向数据流：数据从父组件流向子组件
  • 虚拟DOM：用JS对象描述DOM，提高更新效率

要点：组件化、声明式、单向数据流、虚拟DOM。

2. 类组件和函数组件的区别？

这个问题很常见。

回答思路：

  • 类组件：用class定义，有生命周期，有this
  • 函数组件：用function定义，用Hooks管理状态和副作用
  • 函数组件更简洁，更易测试
  • React官方推荐函数组件
  • 类组件不再推荐新项目使用

要点：Hooks是函数组件的核心，函数组件是未来。

3. 什么是虚拟DOM？

虚拟DOM是React的核心概念。

回答思路：

  • 用JS对象描述真实DOM
  • 状态变化时，生成新的虚拟DOM树
  • 和旧的虚拟DOM树对比（Diff算法）
  • 只更新变化的部分到真实DOM
  • 提高了渲染效率

要点：虚拟DOM不是比直接操作DOM快，而是让更新更高效、更可预测。

4. React的生命周期？

虽然函数组件用Hooks，但生命周期还是会问。

回答思路：

  • 挂载：constructor, render, componentDidMount
  • 更新：render, componentDidUpdate
  • 卸载：componentWillUnmount
  • 对应的Hooks：useEffect

要点：理解每个阶段做什么，以及对应的Hooks。

二、Hooks题

5. useEffect的依赖数组怎么理解？

这是Hooks最常考的问题。

回答思路：

  • 依赖数组决定effect什么时候执行
  • 空数组：只在挂载时执行一次
  • 有依赖：依赖变化时执行
  • 不传数组：每次渲染都执行
  • 要确保依赖数组完整，否则会有闭包问题

要点：理解闭包，用ESLint插件检查依赖。

6. useMemo和useCallback的区别？

这个问题也很常见。

回答思路：

  • useMemo：缓存计算结果，避免重复计算
  • useCallback：缓存函数引用，避免子组件不必要的重渲染
  • 两者都用依赖数组控制更新
  • 不要滥用，先测量再优化

要点：useMemo缓存值，useCallback缓存函数。

7. 自定义Hooks的规则？

自定义Hooks是React的高级用法。

回答思路：

  • 以use开头
  • 只能在组件或其他Hooks中调用
  • 只能在顶层调用，不能在条件或循环中
  • 可以封装复用的逻辑
  • 自定义Hooks是逻辑复用的最佳方式

要点：自定义Hooks让逻辑复用更简单。

8. useState和useReducer的区别？

这个问题考察状态管理的理解。

回答思路：

  • useState：简单状态，适合单个值
  • useReducer：复杂状态，适合多个相关值
  • useReducer更可预测，更容易测试
  • useReducer适合状态逻辑复杂的场景
  • 两者可以互换，看场景选择

要点：简单状态用useState，复杂状态用useReducer。

三、进阶题

9. React的Diff算法？

Diff算法是React的核心。

回答思路：

  • 同层比较，不跨层
  • 不同类型的元素，直接替换
  • 同类型的元素，更新属性
  • 列表用key标识，提高Diff效率
  • key要稳定、唯一、可预测

要点：理解Diff的策略，key的重要性。

10. 什么是受控组件和非受控组件？

表单相关的问题。

回答思路：

  • 受控组件：表单值由React状态控制
  • 非受控组件：表单值由DOM自己管理，用ref获取
  • 受控组件更符合React的思想
  • 非受控组件更简单，适合简单场景
  • 大部分情况用受控组件

要点：受控组件是React的推荐方式。

11. Context怎么用？有什么问题？

Context是React的状态管理方案。

回答思路：

  • 用createContext创建
  • 用Provider提供值
  • 用useContext消费
  • 适合全局状态，如主题、用户信息
  • 问题：Provider的value变化会导致所有消费者重渲染

要点：Context适合真正全局的状态，不要滥用。

12. 性能优化的方法？

性能优化是面试常考题。

回答思路：

  • React.memo：优化子组件重渲染
  • useMemo：缓存计算结果
  • useCallback：缓存函数
  • 虚拟化长列表
  • 代码分割（React.lazy）
  • 先测量再优化

要点：性能优化要有针对性，不要过早优化。

四、React 18相关题

13. React 18的新特性？

React 18是当前最新稳定版。

回答思路：

  • 并发渲染：可中断的渲染
  • 自动批处理：所有更新自动批处理
  • useTransition：标记非紧急更新
  • useDeferredValue：延迟更新值
  • Suspense改进：支持数据获取
  • 服务端组件：实验性特性

要点：并发渲染是React 18的核心。

14. 并发渲染是什么？

并发渲染是React 18的核心特性。

回答思路：

  • 渲染可以被中断
  • 高优先级更新先渲染
  • 低优先级更新可以延后
  • 提高了应用的响应性
  • 不需要手动管理，React自动处理

要点：并发渲染让UI更流畅。

15. useTransition怎么用？

useTransition是React 18的新Hook。

回答思路：

  • 标记非紧急更新
  • 比如搜索、过滤
  • 紧急更新（输入）立即响应
  • 非紧急更新（结果）可以延迟
  • 返回isPending和startTransition

要点：useTransition让用户体验更好。

五、React 19预期题

16. 你了解React 19的预期特性吗？

虽然React 19还没发布，但可以聊预期。

回答思路：

  • 服务端组件可能稳定
  • 可能有新的Hooks（useFormStatus、useOptimistic）
  • 文档可能更新
  • 性能继续优化
  • 更好的TypeScript支持
  • 关注官方RFC和博客

要点：展示你关注React的发展方向。

17. 服务端组件是什么？

服务端组件是React的未来方向。

回答思路：

  • 组件在服务端渲染
  • 不需要发送JS到客户端
  • 可以直接访问后端资源
  • 减少客户端JS体积
  • 和客户端组件配合使用
  • "use client"标记客户端组件

要点：服务端组件改变了前端开发方式。

18. 你怎么看React的未来发展？

开放性问题，考察你的思考。

回答思路：

  • 并发渲染会越来越重要
  • 服务端组件会成为主流
  • 元框架（Next.js等）会更流行
  • AI和React的结合
  • React会继续进化，但核心思想不变

要点：展示你的视野和思考。

六、实战题

19. 怎么设计一个复杂的表单？

实战题，考察工程能力。

回答思路：

  • 用受控组件
  • 表单状态管理（useState或useReducer）
  • 验证（实时验证或提交验证）
  • 错误提示
  • 提交状态（loading、success、error）
  • 可以用表单库（React Hook Form、Formik）

要点：考虑用户体验和边界情况。

20. 怎么处理大列表的性能？

性能实战题。

回答思路：

  • 虚拟化：只渲染可见区域
  • 用react-window或react-virtualized
  • 分页或无限滚动
  • 用useMemo优化列表项
  • 图片懒加载
  • 避免在渲染中做复杂计算

要点：虚拟化是大列表的关键。

21. 怎么组织React项目的结构？

工程题，考察项目经验。

回答思路：

  • 按功能分，不是按类型分
  • components、pages、hooks、utils、services
  • 组件和样式放一起
  • 公共组件抽出来
  • 保持结构清晰，方便查找

要点：项目结构要清晰、可维护。

七、面试准备建议

1. 打好基础

面试准备，首先打好基础。

  • React的核心概念
  • Hooks的原理和用法
  • 生命周期
  • 状态管理
  • 性能优化

基础扎实，才能应对各种问题。

2. 理解原理

不要只会用，要理解原理。

  • 虚拟DOM和Diff算法
  • Hooks的实现原理
  • 状态更新机制
  • 并发渲染的原理
  • 服务端组件的原理

理解原理，才能深入回答。

3. 多做项目

项目经验很重要。

  • 做一些复杂的项目
  • 遇到问题，解决问题
  • 总结经验
  • 面试时能讲出细节

项目经验，是最好的面试准备。

4. 关注动态

关注React的最新动态。

  • 官方博客
  • React Conf
  • RFC讨论
  • 优秀的技术文章
  • 了解React 19的预期

展示你对技术的热情。

5. 模拟面试

可以找人模拟面试。

  • 练习表达
  • 发现薄弱环节
  • 提高应变能力
  • 积累面试经验

模拟面试，能让你更从容。

八、写在最后

React面试题，从基础到进阶，从Hooks到并发渲染，从实战到React 19预期，覆盖了很多方面。

准备面试，要打好基础，理解原理，多做项目，关注动态。React 19虽然还没发布，但了解它的预期特性，能展示你的视野。

2023年了，React依然是最流行的前端框架。不管是面试还是工作，深入理解React，都能让你更有竞争力。

最后，用一句话总结："React面试，考的不是你背了多少题，而是你对React的理解有多深。打好基础，理解原理，多做项目，才能从容应对。"

祝你面试顺利。