178 lines
10 KiB
Plaintext
178 lines
10 KiB
Plaintext
---
|
||
title: React 面试：简介
|
||
description: 一份全面的指南，通过涵盖基本概念、问题类型和为前端工程师量身定制的策略，帮助您掌握 React 面试。
|
||
---
|
||
|
||
React 已经牢固确立了其作为现代前端开发的实际标准。它为各种事物提供支持，从小型 Web 应用程序到数百万用户使用的大型企业平台。无论您是构建交互式仪表板、电子商务网站还是社交媒体平台，您都很有可能正在使用 React 或受到它的启发。
|
||
|
||
许多公司使用 React 构建用户界面，他们的技术面试流程将评估候选人的 React 知识和技能。本指南适用于任何准备技术面试的人，其中 React 技能是相关的，并且侧重于面试的重要概念和知识。它并非旨在教您 React，或取代优秀的 [React 文档网站](https://react.dev/)。
|
||
|
||
内容相当轻松，您应该可以在一个下午内完成阅读。
|
||
|
||
但是，如果时间允许，特别是如果您有一段时间没有访问 [官方 React 文档网站](https://react.dev/)，我们建议您通读整个 [“学习 React”](https://react.dev/learn) 部分，同时浏览每个页面中的示例以及最新的 [博客文章](https://react.dev/blog)。React 的发展速度非常快，您应该不时阅读官方文档，以了解最新更新。这不应超过两个下午。
|
||
|
||
## 本指南适用于谁
|
||
|
||
无论您是申请前端工程师职位、全栈职位还是 React 相关的职位，如果您属于以下类别之一，本指南将对您有所帮助：
|
||
|
||
* **前端工程师**：如果您希望从事主要侧重于 React、JavaScript 和 UI 开发的职位，本指南将为您提供一种结构化的准备方法。
|
||
* **全栈开发人员**：如果 React 只是您工作的一部分，但您仍然需要证明您在构建 UI 组件和管理前端状态方面的专业知识，那么本指南以及 [我们的练习题](/questions/react-interview-questions) 将磨练您的 React 技能。
|
||
* **寻求复习的经验丰富的工程师**：如果您已经在工作中大量使用 React，但希望专门为 React 面试做准备，本指南将填补空白。
|
||
|
||
无论您是想找一份入门级工作还是高级职位，React 面试指南都将帮助您系统地准备技术面试，涵盖从基础知识到高级概念的所有内容。
|
||
|
||
本指南不适用于：
|
||
|
||
* **完全不熟悉 React 的初学者**：本指南假定您熟悉并具有使用 React 构建用户界面的经验；从 [官方 React 文档](https://react.dev) 开始
|
||
* **希望深入研究 React 内部原理的开发人员**：侧重于实际的面试准备，而不是 React 的内部源代码；查看 [JSer 的 React 内部原理深度剖析系列](https://jser.dev/series/react-source-code-walkthrough/)、[Rodrigo Pombo 的构建您自己的 React](https://pomb.us/build-your-own-react/)、[Tiger Abrodi 的 GitHub 项目](https://github.com/tigerabrodi/) 和 [构建您自己的 X](https://github.com/codecrafters-io/build-your-own-x?tab=readme-ov-file#build-your-own-front-end-framework--library)
|
||
* **准备一般软件工程面试的人**：本指南未深入介绍数据结构、一般系统设计或算法；尝试 [技术面试手册](https://www.techinterviewhandbook.org/) 和 [NeetCode](https://neetcode.io/)
|
||
* **React Native 开发人员**：虽然将涵盖许多相关的 React 概念，但本指南未涉及特定于移动端的主题
|
||
* **只想找一份问题和答案列表的人**：本指南解释了 React 面试中相关的概念并教您模式，而不仅仅是为您提供要记住的答案；有关 React 面试问题的列表，请查看 [GreatFrontEnd 的 React 面试问题](/questions/react-interview-questions)
|
||
|
||
如果您已经了解 React 并希望在面试中脱颖而出，那么本指南适合您！🚀
|
||
|
||
## 公司类型及其面试流程
|
||
|
||
| 类别 | 示例 | 面试流程 |
|
||
| --- | --- | --- |
|
||
| **大型科技公司（FAANG 及类似公司）** | Meta、Apple、Amazon、Netflix、Google、Microsoft | 高度结构化，多轮，包括系统设计、算法和前端专业知识 |
|
||
| **中型公司** | Airbnb、Pinterest、Dropbox、Stripe、Shopify、DoorDash | 与大型科技公司类似，但更侧重于产品工程和前端性能 |
|
||
| **高增长初创公司（独角兽和 Pre-IPO）** | Notion、Figma、Ramp、Brex、Databricks、OpenAI | 系统设计、实际前端编码和文化契合的混合。可能包括带回家的作业 |
|
||
| **早期初创公司** | 种子轮到 A 轮融资的初创公司 | 灵活，通常只有 2-3 轮，侧重于解决问题、UI/UX 直觉和快速交付 |
|
||
| **企业** | Oracle、Cisco、SAP、Salesforce、Workday | 结构化，但通常不如 FAANG 那么注重算法 |
|
||
|
||
像 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 测验问题的完整列表](/questions/react-interview-questions/quiz)。
|
||
|
||
### 用户界面编码问题
|
||
|
||
这些问题评估候选人使用 React 实现 UI 组件的能力，重点是创建交互式和视觉上准确的组件。
|
||
|
||
**重要主题**
|
||
|
||
* Prop 设计和组件组合
|
||
* 状态设计和状态管理
|
||
* 事件处理
|
||
* 样式方法（CSS Modules、Styled Components、Tailwind）
|
||
* 条件渲染和渲染项目列表
|
||
* 可访问性（a11y 最佳实践）
|
||
|
||
**示例问题**
|
||
|
||
* 实现一个标签组件
|
||
* 实现一个自动完成组件
|
||
* 实现一个基本的注册表单
|
||
* 构建一个带有叠加层和关闭功能的可重用模态组件
|
||
* 构建一个记忆游戏
|
||
|
||
查看 [React 用户界面编码问题的完整列表](/questions/react-interview-questions)。
|
||
|
||
### 实现 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 中实现下拉菜单组件？
|
||
|
||
查看[前端系统设计问题的完整列表](/questions/formats/system-design)。
|
||
|
||
## 本指南的范围
|
||
|
||
准备 React 面试可能会让人不知所措。有很多内容需要涵盖，而且并非所有主题都对面试至关重要。本指南将消除噪音，重点关注最重要的主题。
|
||
|
||
本指南旨在帮助您以系统的方式掌握 React 面试。每个部分都建立在上一部分的基础上，以帮助您不仅了解 React 的作用，还了解其工作原理以及面试绝对需要了解的内容。
|
||
|
||
我们不建议死记硬背答案；最好对 React 有一个很好的理解，这样您就可以自信地解决遇到的任何问题或变体。您甚至可能会在此过程中学习新知识，这将使您更熟练地使用 React！
|