React 面试：简介

React 已经牢固确立了其作为现代前端开发的实际标准。它为各种事物提供支持，从小型 Web 应用程序到数百万用户使用的大型企业平台。无论您是构建交互式仪表板、电子商务网站还是社交媒体平台，您都很有可能正在使用 React 或受到它的启发。

许多公司使用 React 构建用户界面，他们的技术面试流程将评估候选人的 React 知识和技能。本指南适用于任何准备技术面试的人，其中 React 技能是相关的，并且侧重于面试的重要概念和知识。它并非旨在教您 React，或取代优秀的 React 文档网站。

内容相当轻松，您应该可以在一个下午内完成阅读。

但是，如果时间允许，特别是如果您有一段时间没有访问 官方 React 文档网站，我们建议您通读整个 “学习 React” 部分，同时浏览每个页面中的示例以及最新的 博客文章。React 的发展速度非常快，您应该不时阅读官方文档，以了解最新更新。这不应超过两个下午。

本指南适用于谁

无论您是申请前端工程师职位、全栈职位还是 React 相关的职位，如果您属于以下类别之一，本指南将对您有所帮助：

• 前端工程师：如果您希望从事主要侧重于 React、JavaScript 和 UI 开发的职位，本指南将为您提供一种结构化的准备方法。
• 全栈开发人员：如果 React 只是您工作的一部分，但您仍然需要证明您在构建 UI 组件和管理前端状态方面的专业知识，那么本指南以及 我们的练习题 将磨练您的 React 技能。
• 寻求复习的经验丰富的工程师：如果您已经在工作中大量使用 React，但希望专门为 React 面试做准备，本指南将填补空白。

无论您是想找一份入门级工作还是高级职位，React 面试指南都将帮助您系统地准备技术面试，涵盖从基础知识到高级概念的所有内容。

本指南不适用于：

• 完全不熟悉 React 的初学者：本指南假定您熟悉并具有使用 React 构建用户界面的经验；从 官方 React 文档 开始
• 希望深入研究 React 内部原理的开发人员：侧重于实际的面试准备，而不是 React 的内部源代码；查看 JSer 的 React 内部原理深度剖析系列、Rodrigo Pombo 的构建您自己的 React、Tiger Abrodi 的 GitHub 项目 和 构建您自己的 X
• 准备一般软件工程面试的人：本指南未深入介绍数据结构、一般系统设计或算法；尝试 技术面试手册 和 NeetCode
• React Native 开发人员：虽然将涵盖许多相关的 React 概念，但本指南未涉及特定于移动端的主题
• 只想找一份问题和答案列表的人：本指南解释了 React 面试中相关的概念并教您模式，而不仅仅是为您提供要记住的答案；有关 React 面试问题的列表，请查看 GreatFrontEnd 的 React 面试问题

如果您已经了解 React 并希望在面试中脱颖而出，那么本指南适合您！🚀

公司类型及其面试流程

像 Meta 和 Google 这样的大型科技公司侧重于基础知识，所有编码都必须使用 Vanilla JavaScript 完成；React 几乎无关紧要。您务必从招聘人员那里了解要期望的问题类型，以便优化您的准备！

以下是 React 的相关性、关键主题以及每种 React 面试问题的示例问题的细分。

React 面试问题的类型

React 知识可以在（但不限于）以下问题格式中进行测试。

测验/琐事

测验式问题测试基本的 React 知识，帮助面试官快速评估候选人对 React 的概念、API 和最佳实践的熟悉程度。

虽然可以通过死记硬背来清除这类问题，但我们不建议这样做，因为这些概念也可以在其他类型的问题中进行测试，并且在出现情况时理解和应用相关概念更为重要。

重要主题

• 基础知识：JSX、组件、渲染（虚拟 DOM、协调）
• 组件设计：声明式思考、props、state、结构
• React Hooks：常见 Hooks（例如 useState、useEffect），Hooks 规则，最佳实践
• 受控组件和非受控组件的区别
• React 中的事件处理
• 常见陷阱（例如，陈旧的闭包、不必要的重新渲染）
• 性能优化：记忆化、懒加载、React Profiler

示例问题

• 受控组件和非受控组件有什么区别？
• React 的协调算法是如何工作的？
• 解释 useEffect 和 useLayoutEffect 之间的区别
• 在 React 中更新状态时会发生什么？
• React.memo 如何帮助提高性能？
• 为什么在渲染列表时应该使用 key prop？

查看 React 测验问题的完整列表。

用户界面编码问题

这些问题评估候选人使用 React 实现 UI 组件的能力，重点是创建交互式和视觉上准确的组件。

重要主题

• Prop 设计和组件组合
• 状态设计和状态管理
• 事件处理
• 样式方法（CSS Modules、Styled Components、Tailwind）
• 条件渲染和渲染项目列表
• 可访问性（a11y 最佳实践）

示例问题

• 实现一个标签组件
• 实现一个自动完成组件
• 实现一个基本的注册表单
• 构建一个带有叠加层和关闭功能的可重用模态组件
• 构建一个记忆游戏

查看 React 用户界面编码问题的完整列表。

实现 React Hooks

Hooks 是现代 React 开发的核心部分。这些问题测试候选人对 Hooks 的理解、用例以及管理状态和副作用的能力。

重要主题

• useState、useEffect、useMemo、useCallback、useRef
• 自定义 Hooks 和可重用性
• 正确处理副作用
• 依赖数组和陈旧的闭包
• 使用 Hooks 进行性能优化
• 在 Hooks 中处理异步操作（例如，带有 fetch 的 useEffect）

示例问题

• 实现 useWindow，一个跟踪窗口大小并返回 width 和 height 的自定义 Hook
• 实现 useDebounce，一个延迟函数执行的 Hook
• 实现 usePrevious，一个跟踪先前状态值的 Hook
• 实现 useLocalStorage，一个读取和写入 localStorage 值的 Hook

课后作业

课后作业评估候选人在给定时间内构建真实 React 应用程序的能力，重点是代码质量、可维护性和最佳实践。

大多数课后作业都涉及从端点获取数据，并对该数据进行过滤和排序。

重要主题

• 组件架构和可重用性
• 状态管理（Context API、Redux、Zustand）
• API 获取和错误处理
• 性能优化
• UI/UX 考虑因素
• 代码结构和可读性

示例性课后作业

• 构建一个简单的任务管理应用程序，用户可以在其中添加、编辑和删除任务
• 实现一个电子商务产品列表页面，允许搜索、过滤和排序
• 创建一个天气应用程序，从 API 获取数据并动态显示天气状况
• 使用 React 和图表库设计并实现一个带有图表的仪表板

系统设计

系统设计问题测试候选人构建可扩展、可维护和高性能前端应用程序的能力。

系统设计问题大致可分为两类：

• 应用程序设计：应用程序设计问题并非特定于任何前端技术，但有时面试官可能会问您将如何实现特定部分，您将不得不提及使用 React/Vue/Angular/Svelte/ 等的具体库/方法，以及您将使用它们的哪些 API。
• 组件设计：组件设计问题是关于使用您选择的特定 JavaScript 框架或 Vanilla JavaScript（如果您足够有冒险精神）为特定目的实现可重用、可扩展和可访问的组件。因此，掌握 JavaScript 框架对于设计正确的 props 和组合机制至关重要，并且需要进行组件设计。

重要主题

• 组件层次结构和模块化
• 状态管理策略（全局与局部状态）
• 服务器端渲染 (SSR) 与客户端渲染 (CSR)
• 性能优化（懒加载、记忆化、列表虚拟化）
• 数据获取机制以及如何实现它们（例如缓存、去抖动、重试、乐观变异）
• 错误处理和回退 UI 策略

示例问题

• 您将如何在新闻提要中实现无限滚动？
• 您将如何设计音乐播放器中的组件层次结构？
• 您将如何在 React 中实现模态对话框组件？
• 您将如何在 React 中实现下拉菜单组件？

查看前端系统设计问题的完整列表。

本指南的范围

准备 React 面试可能会让人不知所措。有很多内容需要涵盖，而且并非所有主题都对面试至关重要。本指南将消除噪音，重点关注最重要的主题。

本指南旨在帮助您以系统的方式掌握 React 面试。每个部分都建立在上一部分的基础上，以帮助您不仅了解 React 的作用，还了解其工作原理以及面试绝对需要了解的内容。

我们不建议死记硬背答案；最好对 React 有一个很好的理解，这样您就可以自信地解决遇到的任何问题或变体。您甚至可能会在此过程中学习新知识，这将使您更熟练地使用 React！