点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
原文链接：https://dev.to/m_midas/44-react-frontend-interview-questions-2o63 如有翻译不准，请多指正。
在面试 React 前端开发人员职位时，在技术问题上做好充分准备是至关重要。React 已成为用于构建用户界面的超流行的 JavaScript 库之一，甲方们通常专注于评估候选人对 React 重要概念、超佳实践和相关技术的理解。在本文中，我们将探讨 React 前端开发人员访谈中常见问题的完整列表。通过熟悉这些问题及其答案，你可以提高成功的机会并展示你对 React 开发的熟练程度。因此，让我们深入探讨在 React 前端开发人员访谈中应该准备好解决的关键主题。
1. 你知道哪些 React Hook？
·useState：用于管理功能组件中的状态。·useEffect：用于在功能组件中执行副作用，例如获取数据或订阅事件。·useContext：用于访问功能组件中 React 上下文的值。·useRef：用于创建对跨渲染保留的元素或值的可变引用。·useCallback：用于记忆功能，防止不必要的重新渲染。·useMemo：用于记忆值，通过缓存昂贵的计算来提高性能。·useReducer：用于使用reducer函数管理状态，类似于Redux的工作方式。 ·useLayoutEffect：类似于 useEffect，但效果在所有 DOM 突变后同步运行。这些Hook提供了强大的工具，用于管理状态、处理副作用和重新编辑React 功能组件中的逻辑。
2. 什么是虚拟DOM？
虚拟 DOM 是 React 中的一个概念，其中创建了实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。
当对 React 组件的数据或状态进行更改时，虚拟 DOM 会更新，而不是直接操作真实的 DOM。然后，虚拟 DOM 计算组件先前状态和更新状态之间的差异，称为“差异”过程。
一旦确定了差异，React 就会有效地只更新真实 DOM 的必要部分以反映这些变化。这种方法超大限度地减少了实际 DOM 操作的次数，并提高了应用程序的整体性能。
通过使用虚拟 DOM，React 提供了一种创建动态和交互式用户界面的方法，同时确保效率和渲染速度。3. 如何渲染元素数组？
map()若要渲染元素数组，你可以使用该方法循环访问数组并返回一个新的 React 元素数组。 
4. 受控组件和非受控组件有什么区别？
受控组件和非受控组件之间的区别在于它们如何管理和更新其状态。
受控组件是状态由 React 控制的组件。组件接收其当前值并通过 props 更新它。当值更改时，它还会触发回调函数。这意味着组件不存储自己的内部状态。相反，父组件管理该值并将其向下传递到受控组件。
另一方面，不受控制的组件使用 refs 或其他方法在内部管理自己的状态。它们独立存储和更新其状态，而不依赖于 props 或回调。父组件对不受控制的组件的状态的控制较少。 
5. 基于类的 React 组件和函数式 React 组件有什么区别？
基于类的组件和函数组件之间的主要区别在于它们的定义方式以及它们使用的语法。React.Component基于类的组件被定义为 ES6 类并扩展该类。他们使用render该方法返回定义组件输出的 JSX （JavaScript XML）。类组件可以通过this.state和this.setState()访问组件生命周期方法和状态管理。 
另一方面，功能组件被定义为简单的 JavaScript 函数。它们将 props 作为参数并直接返回 JSX。功能组件无权访问生命周期方法或状态。然而，随着 React 16.8 中 React Hooks 的引入，功能组件现在可以管理状态并使用其他功能，例如上下文当中的效果展示。
一般来说，功能组件被认为更简单，更易于阅读和测试。建议尽可能使用功能组件，除非对基于类的组件有特定需求。
6. 组件的生命周期方法是什么？
生命周期方法是一种挂接到组件生命周期不同阶段的方法，允许你在特定时间执行特定代码。以下是主要生命周期方法的列表：1.constructor：这是创建组件时调用的第一个方法。它用于初始化状态和绑定事件处理程序。在功能组件中，你可以将钩子useState用于类似的目的。 2.render：此方法负责渲染 JSX 标记并返回要在屏幕上显示的内容。3.componentDidMount：此方法在组件在 DOM 中呈现后立即调用。它通常用于初始化任务，例如 API 调用或设置事件侦听器。4.componentDidUpdate：当组件的 props 或状态更改时调用此方法。它允许您执行副作用、根据更改更新组件或触发其他 API 调用。5.componentWillUnmount：此方法在从 DOM 中删除组件之前调用。它用于清理componentDidMount中设置的任何资源，例如删除事件侦听器或取消计时器。某些生命周期方法（如componentWillMount、componentWillReceiveProps 和componentWillUpdate）已被弃用或替换为替代方法或挂钩。至于“this”，它指的是类组件的当前实例。它允许您访问组件中的属性和方法。在功能组件中，不使用“this”，因为函数未绑定到特定实例。
7. 使用 useState 有什么特点？
useState返回一个状态值和一个用于更新它的函数。
在初始呈现期间，返回的状态与作为第一个参数传递的值匹配。该函数用于更新状态。它将新的状态值作为参数，并对组件的重新渲染进行排队。该函数还可以接受回调函数作为参数，该函数将以前的状态值作为参数。
8. 使用useEffect有什么特点？
useEffect钩子允许你在功能组件中执行副作用。
突变、订阅、计时器、日志记录和其他副作用不允许在称为 React 渲染阶段的功能组件的主体内出现。这可能会导致用户界面中出现令人困惑的错误和不一致。
相反，建议使用 useEffect。传递给 useEffect 的函数将在渲染提交到屏幕后执行，或者如果将依赖项数组作为第二个参数传递，则每次其中一个依赖项更改时都会调用该函数。
9. 如何跟踪功能组件的卸载？
通常，useEffect创建需要在组件离开屏幕之前清理或重置的资源，例如订阅或计时器标识符。
为此，传递给useEffect的函数可以返回一个清理函数。清理功能在从用户界面中删除组件之前运行，以防止内存泄漏。此外，如果组件多次渲染（通常如此），则在执行下一个效果之前，将清除上一个效果。 
10. React 中的道具是什么？
Props 是从父级传递给组件的数据。道具是固定的，不能更改。
11. 什么是state管理器，曾与哪些库相连？
状态管理器是帮助管理应用程序状态的工具或库。它提供了一个集中式存储或容器，用于存储和管理可由应用程序中的不同组件访问和更新的数据。
状态管理器可以解决几个问题。首先，将数据及其相关逻辑与组件分开是一种很好的做法。其次，当使用本地状态并在组件之间传递它时，由于组件深度嵌套的可能性，代码可能会变得复杂。通过拥有全局存储，我们可以访问和修改来自任何组件的数据。
除了 React Context，Redux 或 MobX 通常用作状态管理库。
12. 在哪些情况下可以使用本地状态，何时应该使用全局状态？
如果本地状态仅在一个组件中使用，并且没有计划将其传递给其他组件，则建议使用本地状态。本地状态也用于表示列表中单个项的组件中。但是，如果组件分解涉及嵌套组件，并且数据在层次结构中向下传递，则使用全局状态。
13. Redux 中的 reducer 是什么，它需要哪些参数？
reducer 是一个纯函数，它将状态和动作作为参数。在 reducer 内部，我们跟踪接收到的动作的类型，并根据它修改状态并返回一个新的状态对象。
14. 什么是Action，如何在 Redux 中更改状态？
Action 是一个简单的 JavaScript 对象，它必须具有具有类型字段 
你也还可以选择添加一些数据作为有效负载。为了更改状态，必须调用调度函数，我们将操作传递给该函数
15. Redux 实现了哪种模式？
Redux 实现了 Flux 模式，这是一种可预测的应用程序状态管理模式。它通过引入单向数据流和应用程序状态的集中存储来帮助管理应用程序的状态。
16. Mobx 实现哪种模式？
Mobx 实现了 Observer 模式，也称为 Publish-Subscribe 模式。
17. 使用 Mobx 有什么特点？
Mobx提供可观测和计算等装饰器，以定义可观测状态和反应函数。用动作装饰的动作用于修改状态，确保所有更改都得到跟踪。Mobx还提供自动依赖跟踪、不同类型的反应、对反应性的细粒度控制，以及通过mobx-react软件包与React的无缝集成。总体而言，Mobx通过根据可观察状态的变化自动执行更新过程来简化状态管理。
18. 如何访问Mobx状态的变量？
通过使用observable修饰器将变量定义为可观察变量，可以访问处于状态中的变量。下面是一个示例：
在本例中，myVariable被定义为使用observable装饰器的可观察对象。然后，您可以使用store.myVariable访问变量。对myVariable所做的任何更改都将自动触发依赖组件或反应的更新。
19. Redux 和 Mobx 有什么区别？
Redux 是一个更简单、更固执己见的状态管理库，它遵循严格的单向数据流并促进不变性。它需要更多的样板代码和显式更新，但与React 有很好的集成。 另一方面，Mobx 提供了一个更灵活、更直观的 API，并且样板代码更少。它允许您直接修改状态并自动跟踪更改以获得更好的性能。Redux 和 Mobx 之间的选择取决于你的特定需求和偏好。
20. 什么是JSX？
默认情况下，以下语法用于在 react 中创建元素。
通常来看
这正是标记所称的 jsx。这是一种语言扩展，简化了对代码和开发的感知。
21. 什么是props drilling
道具钻取是指通过多层嵌套组件传递道具的过程，即使一些中间组件不直接使用这些道具。这可能会导致代码结构复杂而繁琐。 
在此示例中，即使 ChildA 不直接使用该 prop，该 prop 也会从Parent 组件传递到 ChildA，然后从 ChildA 传递到 ChildB。当存在多个嵌套级别或需要由组件树中更下方的组件访问数据时，这可能会成为问题。它会使代码更难维护和理解。可以通过使用其他模式（如上下文或状态管理库（如 Redux 或 MobX）来缓解 props 钻取。这些方法允许组件访问数据，而无需通过每个中间组件传递 props。
22. 如何有条件地渲染元素？
可以使用任何条件运算符，包括三元运算符。
23. useMemo 的用途是什么，它是如何工作的？
useMemo用于缓存和记忆计算。传递 creating 函数和依赖项数组。仅当任何依赖项的值发生更改时，才会重新计算记忆值。这种优化有助于避免每次渲染时成本高昂的计算。
对于第一个参数，该函数接受执行计算的回调，对于第二个依赖项数组，该函数仅在至少一个依赖项发生更改时才会重新执行计算。 
24. useCallback 的用途是什么，它是如何工作的？
钩子将返回回调的记忆版本，仅当其中一个依赖项的值发生变化时，该回调才会更改。 当将回调传递给优化的子组件时，这很有用，这些子组件依赖于链接相等性来防止不必要的渲染。
25. useMemo 和 useCallback 有什么区别？
1.useMemo用于记忆计算结果，而useCallback用于记忆函数本身。2.useMemo缓存计算值，如果依赖项未更改，则在后续呈现时返回该值。3.useCallback缓存函数本身并返回相同的实例，除非依赖项已更改。
26. 什么是 React Context？
React Context 是一种功能，它提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。它允许您创建一个全局状态，无论其位置如何，树中的任何组件都可以访问该状态。当你需要在多个不通过 props 直接连接的组件之间共享数据时，上下文非常有用。React Context API 由三个主要部分组成： 1.createContext：此函数用于创建新的上下文对象。2.Context.Provider：此组件用于为上下文提供值。它包装需要访问该值的组件。3.Context.Consumer或钩子：此组件或钩子用于使用上下文中的值。它可以在上下文提供程序内的任何组件中使用。useContext通过使用 React Context，你可以避免 prop （通过多个级别的组件传递 prop），并轻松地在更高一级别管理状态，使你的代码更有条理和高效
27. useContext 的用途是什么，它是如何工作的？
在典型的 React 应用程序中，数据是使用 props 从上到下（从父组件到子组件）传递的。但是，对于某些类型的道具（例如，所选语言、UI 主题）来说，这样的使用方法可能过于繁琐，这些道具必须传递给应用程序中的许多组件。上下文提供了一种在组件之间共享此类数据的方法，不必特意将 props 传递到下面的每个级别。当上下文值更改时，调用 useContext 的组件将始终重新呈现。如果重新渲染组件的成本很高，则可以使用记忆对其进行优化。
28. useRef 的用途是什么，它是如何工作的？
useRef返回一个可修改的 ref 对象，即一个属性。其电流由传递的参数初始化。返回的对象将在组件的整个生命周期内持续存在，并且不会因其他而更改。通常的用例是以命令式样式访问后代。即使用 ref，我们可以显式引用 DOM 元素。
29. 什么是React.memo（）？
React.memo()是一个高阶组件。如果您的组件总是用不更改的道具渲染相同的东西，您可以将其包装在React.memo()调用中，以在某些情况下提高性能，从而记住结果。这意味着React将使用后一个渲染的结果，避免重新渲染。React.memo()只影响道具的更改。如果功能组件包装在React.memo中，并使用useState、useReducer或useContext，则当状态或上下文发生变化时，它将被重新渲染。 
30. 什么是 React Fragment？
从一个组件返回多个元素是 React 中的常见做法。允许你形成子元素列表，而无需在 DOM 中创建不必要的节点。
31. 什么是 React Reconciliation？
协调是一种 React 算法，用于将一个元素树与另一个元素树区分开来，以确定需要替换的部分。协调是我们过去称为虚拟 DOM 的算法背后的算法。这个定义听起来是这样的：当你渲染一个 React 应用程序时，描述该应用程序的元素树是在预留内存中生成的。然后，此函数包含在渲染环境中，例如，浏览器应用程序，它被转换为一组 DOM 操作。更新应用程序状态时，将生成一个新tree。将新tree与前tree进行比较，以便准确计算和启用重绘更新的应用程序所需的操作。
32. 为什么在使用 map（） 时需要列表中的键？
这些键帮助 React 确定哪些元素被更改、添加或删除。必须锁定它们，以便 React 可以随着时间的推移匹配数组元素。选择键的更好方法是使用一个字符串，该字符串将清楚地将列表项与其相邻项区分开来。大多数情况下，你将使用数据中的 ID 作为密钥。
33. 如何在 Redux Thunk 中处理异步动作？
要使用 Redux Thunk，你需要将其作为中间件导入。动作创建者不仅应该返回一个对象，还应该返回一个将 dispatch 作为参数的函数。
34. 如何跟踪功能组件中对象字段的变化？
你需要使用useEffect钩子并将对象的字段作为依赖数组传递。
35. 如何访问DOM元素？
引用使用React.createRef()或useRef()钩子创建，并通过ref属性附加到React元素。通过访问创建的引用，我们可以使用ref.current访问DOM元素。 
36. 什么是自定义Hook？
自定义Hook是一种允许您在不同组件之间重用逻辑的功能。它是一种封装可重用逻辑的方法，以便可以在多个组件之间轻松共享和重用。自定义钩子是通常以单词 use 开头的函数，如果需要，可以调用其他钩子。
37. 什么是公共API？
在索引文件的上下文中，公共 API 通常是指向外部模块或组件公开和访问的接口或函数。下面是表示公共 API 的索引文件的代码示例：
在此示例中，index.js 文件充当公共 API，其中导出函数greet()和calculateSum()，并且可以通过导入它们从其他模块访问它们。其他模块可以在其实现过程中导入和使用这些函数：
通过从索引文件中导出特定函数，我们正在定义模块的公共 API，允许其他模块使用这些函数。
38. 创建自定义Hook的规则是什么？
- Hook名称以“use”开头。
- 如果需要，请使用现有的钩子。
- 不要有条件地调用钩子。
- 将可重用逻辑提取到自定义钩子中。
- 自定义钩子必须是纯函数。
- 自定义钩子可以返回值或其他钩子。
- 以描述性方式命名自定义挂钩
39. 什么是SSR（服务器端渲染）？
服务器端呈现 （SSR） 是一种用于在服务器上呈现页面并将完整呈现的页面发送到客户端进行显示的技术。它允许服务器生成网页的完整 HTML 标记，包括其动态内容，并将其作为对请求的响应发送给客户端。在传统的客户端呈现方法中，客户端接收一个小的 HTML 页面，然后向服务器发出额外的数据和资源请求，这些请求用于在客户端呈现页面。这可能会导致初始页面加载时间变慢，并对搜索引擎优化 （SEO） 产生负面影响，因为搜索引擎爬虫难以将 JavaScript 驱动的内容编入索引。使用 SSR，服务器通过执行必要的 JavaScript 代码来生成 HTML 来呈现网页。这意味着客户端从服务器接收完整呈现的页面，从而减少了对额外资源请求的需求。SSR 缩短了初始页面加载时间，并允许搜索引擎轻松索引内容，从而实现更好的 SEO。SSR 通常用于框架和库，如 Next.js for React 和 Nuxt.js for Vue.js 以启用服务器端渲染功能。这些框架为你处理服务器端渲染逻辑，从而更轻松地实现 SSR。
40. 使用 SSR 有什么好处？
- 改进了初始加载时间：SSR 允许服务器将完整呈现的 HTML 页面发送到客户端，从而减少客户端所需的处理量。这缩短了初始加载时间，因为用户可以更快地看到完整的页面。
- SEO 友好：搜索引擎可以有效地抓取和索引 SSR 页面的内容，因为完全呈现的 HTML 在初始响应中可用。这提高了搜索引擎的可见性，并有助于获得更好的搜索排名。
- 辅助功能：SSR 确保禁用了 JavaScript 或使用辅助技术的用户能够访问内容。通过在服务器上生成 HTML，SSR 为所有用户提供了可靠且可访问的用户体验。
- 低带宽环境中的性能：SSR 减少了客户端需要下载的数据量，使其对低带宽或高延迟环境中的用户有利。这对于移动用户或互联网连接速度较慢的用户尤为重要。
虽然 SSR 提供了这些好处，但需要注意的是，与客户端渲染方法相比，它可能会引入更多的服务器负载和维护复杂性。应仔细考虑缓存、可伸缩性和服务器端渲染性能优化等因素。
41. 你知道的Next.js的主要功能是什么？
getStaticProps：此方法用于在构建时获取数据，并将页面预呈现为静态 HTML。它确保数据在生成时可用，并且在后续请求中不会更改。
getServerSideProps：此方法用于获取每个请求的数据，并在服务器上预呈现页面。当你需要获取可能经常更改或特定于用户的数据时，可以使用它。
getStaticPaths：此方法在动态路由中用于指定应在构建时预呈现的路径列表。它通常用于获取带有参数的动态路由的数据。
42. 什么是 linter？
Linters 是用于检查源代码是否存在潜在错误、错误、风格不一致和可维护性问题的工具。它们有助于强制执行编码标准，并确保代码库的代码质量和一致性。 Linters 通过扫描源代码并将其与一组预定义的规则或指南进行比较来工作。这些规则可以包括语法和格式约定、最佳实践、潜在的 bug 和代码气味。当 linter 识别出违反规则的行为时，它会生成警告或错误，突出显示需要注意的特定代码行。使用 linter 可以带来以下几个好处：1.代码质量：Linters 有助于识别和防止潜在的错误、代码异味和反模式，从而提高代码质量。2.一致性：Linters 强制执行编码约定和风格指南，确保整个代码库的格式和代码结构一致，即使多个开发人员在同一个项目上工作也是如此。3.可维护性：通过及早发现问题并促进良好的编码实践，linter 有助于提高代码的可维护性，使其更容易理解、修改和扩展代码库。4.效率：Linters 可以通过自动化代码审查流程并在常见错误在开发或生产过程中造成问题之前捕获它们来节省开发人员的时间。一些流行的 linter 是用于 JavaScript 的 ESLint 和用于 CSS 和 Sass 的 Stylelint。
43. 你知道 React 的哪些架构解决方案？
有几种架构解决方案和模式可用于构建 React 项目。一些流行的包括： 1.MVC（模型-视图-控制器）：MVC 是一种传统的架构模式，它将应用程序分为三个主要组件 - 模型、视图和控制器。React 可以在视图层中使用来渲染 UI，而其他库或框架可用于模型层和控制器层。2.Flux：Flux 是 Facebook 专门为 React 应用程序推出的应用程序架构。它遵循单向数据流，其中数据沿单个方向流动，从而更容易理解和调试应用程序的状态更改。3.原子设计：原子设计并非特定于 React，而是一种将 UI 划分为更小的、可重用组件的设计方法。它鼓励构建小型、独立且可以组合以创建更复杂的 UI 的组件。4.容器和组件模式：此模式将表示 （Component） 与逻辑和状态管理 （Container） 分开。组件负责呈现 UI，而容器负责处理业务逻辑和状态管理。5.功能切片设计：它是一种用于组织和构建 React 应用程序的现代架构方法。它旨在通过根据功能或模块划分应用程序代码库来解决可伸缩性、可维护性和可重用性方面的挑战。
44. 什么是功能切片设计？
它是一种用于组织和构建 React 应用程序的现代架构方法。它旨在通过根据功能或模块划分应用程序代码库来解决可伸缩性、可维护性和可重用性方面的挑战。 在功能切片设计中，应用程序的每个功能或模块都组织到一个单独的目录中，其中包含所有必需的组件、操作、简化器和其他相关文件。这有助于保持代码库的模块化和隔离性，使其更易于开发、测试和维护。特征切片设计促进了关注点的明确分离，并将功能封装在各个功能中。这允许不同的团队或开发人员独立处理不同的功能，而不必担心冲突或依赖关系。
写在最后
公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
- 回复 面试题，获取最新大厂面试资料。
- 回复 简历，获取 3200 套 简历模板。
- 回复 React实战，获取 React 最新实战教程。
- 回复 Vue实战，获取 Vue 最新实战教程。
- 回复 ts，获取 TypeScript 精讲课程。
- 回复 vite，获取 Vite 精讲课程。
- 回复 uniapp，获取 uniapp 精讲课程。
- 回复 js书籍，获取 js 进阶 必看书籍。
- 回复 Node，获取 Nodejs+koa2 实战教程。
- 回复 数据结构算法，获取数据结构算法教程。
- 回复 架构师，获取 架构师学习资源教程。
- 更多教程资源应有尽有，欢迎 关注获取。