React面试题及答案

以下是关于React的常见面试题及答案列表。

• 一般React面试题
• React组件面试题
• React Refs 面试题
• React Router 面试题
• React Styling 面试题
• React Redux 面试题
• MCQ - 多项选择题

一般React面试题

1) 什么是 React？

React 是一个声明式、高效、灵活的开源前端 JavaScript 库，由 Facebook 于 2011 年开发。它采用基于组件的方法来构建可重用 UI 组件，尤其适用于单页应用程序。它用于开发 Web 和移动应用的交互式视图层。它由 Facebook 的软件工程师 Jordan Walke 创建。它最初于 2011 年部署在 Facebook 的 News Feed 部分，后来用于其 WhatsApp 和 Instagram 等产品。

更多信息： 什么是 React。

2) React 的特点有哪些？

React 框架作为 Web 开发人员中最棒的框架之一，正在迅速普及。React 的主要特点是：

• JSX
• 组成部分
• 单向数据绑定
• 虚拟 DOM
• 简单性
• 性能

更多信息： React 特点。

3) 使用 React 最关键的优势有哪些？

以下是使用 React 最关键的优势列表：

React 易于学习和使用

React 拥有良好的文档、教程和培训资源。任何有 JavaScript 背景的开发者都可以轻松地转向 React，并轻松理解和开始使用 React 创建 Web 应用。任何对 JavaScript 有少量了解的人都可以开始使用 React 构建 Web 应用程序。

React 遵循 MVC 架构。

React 是 MVC（模型-视图-控制器）架构模型中的 V（视图部分），被称为“JavaScript 框架之一”。它功能不完整，但具有许多开源 JavaScript 用户界面 (UI) 库的优点，有助于更好地完成任务。

React 使用虚拟 DOM 来提高效率。

React 使用虚拟 DOM 来渲染视图。虚拟 DOM 是真实 DOM 的虚拟表示。每次 React 应用中的数据更改时，都会创建一个新的虚拟 DOM。创建虚拟 DOM 比在浏览器中渲染 UI 要快得多。因此，通过使用虚拟 DOM，应用的效率得到了提高。这就是 React 提供出色效率的原因。

创建动态 Web 应用程序很简单。

在 React 中，创建动态 Web 应用程序更加容易。它需要的代码更少，但功能更多。它使用 JSX（JavaScript 扩展），这是一种特殊的语法，允许 HTML 引用和 HTML 标签语法来渲染特定的子组件。

React 对 SEO 友好。

React 使开发者能够开发引人入胜的用户界面，这些界面可以轻松地被各种搜索引擎导航。它还支持服务器端渲染，这也有助于提升您应用的 SEO。

React 允许组件重用。

React Web 应用程序由多个组件组成，每个组件都有自己的逻辑和控制。这些组件提供小的、可重用的 HTML 代码片段作为输出，可以在需要时重用。代码重用有助于开发者使他们的应用程序更易于开发和维护。它还使组件嵌套变得容易，并允许开发者用简单的构建块构建复杂的应用程序。组件的重用也提高了开发速度。

实用工具支持

React 提供了许多实用的工具，可以使开发者的任务更容易理解。在 Chrome 和 Firefox 开发者扩展中使用这些工具，允许我们检查虚拟 DOM 中的 React 组件层级。它还允许我们选择特定的组件并检查和编辑它们当前的 props 和 state。

React 拥有丰富的库集。

React 拥有庞大的库生态系统，并为您提供了选择工具、库和架构的自由，以便根据您的需求开发最佳应用程序。

代码测试范围

React Web 应用程序易于测试。这些应用程序提供了开发者可以借助原生工具测试和调试其代码的范围。

更多信息： React 的优缺点。

4) React 的最大局限性是什么？

以下是 React 的最大局限性列表：

• React 只是一个库。它不是一个完整的框架。
• 它有一个庞大的库，需要时间来理解。
• 对于新程序员来说，理解和编写代码可能很困难。
• React 使用内联模板和 JSX，这可能很困难，并且会成为障碍。它还会使编码复杂化。

5) 什么是 JSX？

JSX 代表 JavaScript XML。它是 React 的一个扩展，允许编写看起来像 HTML 的 JavaScript 代码。它使 HTML 文件易于理解。JSX 文件使 React 应用程序健壮并提高其性能。JSX 允许您在编写 JavaScript 代码的同一个文件中编写类 XML/HTML 的语法，然后预处理器（即 Babel 等转译器）将这些表达式转换为实际的 JavaScript 代码。就像 XML/HTML 一样，JSX 标签具有标签名、属性和子元素。

示例

在上面的示例中，<h1> 标签内的文本作为 JavaScript 函数返回给 render 函数。编译后，JSX 表达式变为普通的 JavaScript 函数，如下所示：

更多信息： React JSX。

6) 为什么浏览器无法读取 JSX？

浏览器无法直接读取 JSX，因为它们只能理解 JavaScript 对象，而 JSX 不是常规的 JavaScript 对象。因此，我们需要使用 Babel 等转译器将 JSX 文件转换为 JavaScript 对象，然后将其传递给浏览器。

7) 为什么我们使用 JSX？

• 它比普通 JavaScript 更快，因为它在将代码翻译成 JavaScript 时会进行优化。
• React 使用组件同时包含标记和逻辑，而不是将它们放在不同的文件中。
• 它是类型安全的，并且大多数错误都可以在编译时找到。
• 它使创建模板更容易。

8) 你对虚拟 DOM 有什么理解？

虚拟 DOM 是一个轻量级的 JavaScript 对象，它是真实 DOM 的内存表示。它是渲染函数被调用和屏幕上显示元素之间的中间步骤。它类似于一个节点树，将元素、它们的属性和内容列为对象及其属性。渲染函数创建 React 组件的节点树，然后响应用户或系统执行的各种操作引起的数据模型变化来更新该节点树。

9) 解释虚拟 DOM 的工作原理。

虚拟 DOM 分三个步骤工作：

1. 每次 React 应用中的数据发生变化时，整个 UI 都会在虚拟 DOM 表示中重新渲染。

2. 现在，计算旧 DOM 表示和新 DOM 之间的差异。

3. 计算完成后，真实 DOM 将仅使用已更改的内容进行更新。

10) React 与 Angular 有何不同？

React 在以下方面与 Angular 不同：

更多信息： AngularJS 和 ReactJS 区别。

11) React 的 ES6 语法与 ES5 语法有何不同？

React 的 ES6 语法在以下方面与 ES5 语法不同：

require vs. Import

exports vs. export

component and function

props

状态

12) ReactJS 和 React Native 有何区别？

ReactJS 和 React Native 的主要区别如下：

更多信息： ReactJS 与 React Native 区别。

13) 真实 DOM 和虚拟 DOM 有何区别？

下表说明了真实 DOM 和虚拟 DOM 之间的主要区别：

React组件面试题

14) 你对“在 React 中，一切皆组件”这句话有什么理解？

在 React 中，组件是 React 应用程序的构建块。这些组件将整个 React 应用程序的 UI 分割成小的、独立的、可重用的代码块。React 可以独立地渲染这些组件，而不会影响应用程序 UI 的其余部分。因此，我们可以说，在 React 中，一切皆组件。

15) 解释 render() 在 React 中的作用。

每个 React 组件都必须有一个 render() 函数。Render 函数用于返回您想在组件中显示的 HTML。如果您需要渲染多个 HTML 元素，您需要将它们分组在一个包含标签（父标签）中，例如 <div>、<form>、<group> 等。此函数每次调用时都会返回相同的结果。

示例： 如果您需要显示一个标题，可以按如下方式操作：

注意事项

• 每个 render() 函数都包含一个 return 语句。
• return 语句只能有一个父 HTML 标签。

16) 如何将两个或多个组件嵌入到一个组件中？

可以通过以下方式将两个或多个组件嵌入：

17) 什么是 Props？

Props 在 React 中代表“Properties”。它们是组件的只读输入。Props 是一个对象，它存储标签属性的值，并且其工作方式类似于 HTML 属性。它提供了一种在整个应用程序中将数据从父组件传递到子组件的方式。

它类似于函数参数，并以与传递给函数的参数相同的方式传递给组件。

Props 是不可变的，因此我们无法在组件内部修改 props。在组件内部，我们可以添加称为 props 的属性。这些属性在组件中以 this.props 的形式可用，并可用于在我们的 render 方法中渲染动态数据。

更多信息： React Props。

18) 什么是 React 中的 State？

State 是一个可更新的结构，其中包含关于组件的数据和信息。它可能会在组件的生命周期内响应用户操作或系统事件而发生变化。它是 React 组件的核心，它决定了组件的行为以及它将如何渲染。它应尽可能保持简单。

让我们创建一个带有“message state”的“User”组件。

更多信息： React State。

19) 区分 State 和 Props。

State 和 Props 之间的主要区别如下：

更多信息： React State vs Props。

20) 如何更新组件的 State？

我们可以使用 this.setState() 方法来更新组件的 State。此方法不一定立即替换 State。相反，它只将更改添加到原始 State。它是用于响应事件处理程序和服务器响应来更新用户界面 (UI) 的主要方法。

示例

更多信息： React Component API。

21) 区分无状态组件和有状态组件。

无状态组件和有状态组件的区别是：

22) React 中的箭头函数是什么？如何使用？

箭头函数是 ES6 标准的新特性。如果您需要使用箭头函数，则无需将任何事件绑定到“this”。这里，“this”的作用域是全局的，不限于任何调用函数。因此，如果您使用箭头函数，则无需在构造函数中绑定“this”。它也称为“肥箭头”（=>）函数。

23) React 中的事件是什么？

事件是用户操作或系统生成的事件（如鼠标单击、网页加载、按键、窗口大小调整等）的结果触发的操作。在 React 中，事件处理系统与处理 DOM 元素中的事件非常相似。React 事件处理系统称为合成事件，它是浏览器原生事件的跨浏览器包装器。

使用 React 处理事件有一些语法差异，它们是：

• React 事件命名为 camelCase 而不是小写。
• 使用 JSX 时，传递给事件处理程序的函数而不是字符串。

更多信息： React 事件。

24) 如何在 React 中创建事件？

我们可以如下创建事件：

示例

25) React 中的合成事件是什么？

合成事件是一个对象，它充当浏览器原生事件的跨浏览器包装器。它将不同浏览器原生事件的行为组合成一个 API，包括 stopPropagation() 和 preventDefault()。

在给定的示例中，e 是一个合成事件。

26) 受控组件和非受控组件有什么区别？

受控组件和非受控组件的区别是：

更多信息： React 受控 vs 非受控组件。

27) 解释 React 中的列表。

列表用于以有序格式显示数据。在 React 中，列表的创建方式与在 JavaScript 中创建列表类似。我们可以使用 map() 函数遍历列表的元素。

示例

更多信息： React 列表。

28) Keys 在 React 中的意义是什么？

key 是一个唯一标识符。在 React 中，它用于标识列表中哪些项目已更改、更新或删除。当动态创建组件或用户修改列表时，它非常有用。它还有助于确定一组组件中哪些组件需要重新渲染，而不是每次都重新渲染整个组件集。它提高了应用程序的性能。

更多信息： React Keys。

29) React 中如何创建表单？

表单允许用户与应用程序交互，并收集用户信息。表单可以执行许多任务，例如用户身份验证、添加用户、搜索、过滤等。表单可以包含文本字段、按钮、复选框、单选按钮等。

React 提供了一种有状态的、响应式的方法来构建表单。React 中的表单与 HTML 表单类似。但在 React 中，组件的状态属性只能通过 setState() 更新，并且 JavaScript 函数处理其提交。此函数可以完全访问用户在表单中输入的数据。

更多信息： React 表单。

30) React 组件的生命周期有哪些不同阶段？

React 组件的生命周期阶段如下：

初始阶段：这是 React 生命周期中的出生阶段，当组件开始其进入 DOM 的旅程时。在此阶段，组件包含默认的 Props 和初始 State。这些默认属性在组件的构造函数中设置。

挂载阶段：在此阶段，组件的实例被创建并添加到 DOM 中。

更新阶段：这是 React 生命周期的下一个阶段。在此阶段，我们获取新的 Props 并更改 State。此阶段可能仅在 prop 或 state 发生变化时才更新和重新渲染。此阶段的主要目标是确保组件显示其最新版本。此阶段会反复发生。

卸载阶段：这是 React 生命周期的最后阶段，组件实例被销毁并从 DOM 中卸载（移除）。

更多信息： React 组件生命周期。

31) 详细解释 React 组件的生命周期方法。

重要的 React 生命周期方法有：

• getInitialState(): 用于指定 this.state 的默认值。它在组件创建之前执行。
• componentWillMount(): 在组件渲染到 DOM 之前执行。
• componentDidMount(): 在组件被渲染并放置在 DOM 上时执行。现在，您可以执行任何 DOM 查询操作。
• componentWillReceiveProps(): 当组件从父类接收新 props 并且在调用下一次渲染之前被调用。如果您想响应 prop 更改来更新 State，您应该比较 this.props 和 nextProps，以使用 this.setState() 方法执行 State 转换。
• shouldComponentUpdate(): 当组件决定对 DOM 进行任何更改/更新时调用，并根据某些条件返回 true 或 false 值。如果此方法返回 true，组件将更新。否则，组件将跳过更新。
• componentWillUpdate(): 在 DOM 中进行渲染之前调用。在这里，您不能通过调用 this.setState() 方法来更改组件 State。如果 shouldComponentUpdate() 返回 false，则不会调用它。
• componentDidUpdate(): 渲染发生后立即调用。在此方法中，您可以将任何您想在更新发生后执行的代码放在里面。
• componentWillUnmount(): 在组件被永久销毁和卸载之前立即调用。它用于清理内存空间，例如使计时器无效、事件监听器、取消网络请求或清理 DOM 元素。如果组件实例被卸载，您将无法再次挂载它。

32) 什么是 Pure Components？

Pure Components 是在 React 15.3 版本中引入的。React.Component 和 React.PureComponent 在 shouldComponentUpdate() React 生命周期方法上有所不同。此方法通过返回布尔值（true 或 false）来决定组件的重新渲染。在 React.Component 中，shouldComponentUpdate() 方法默认返回 true。但在 React.PureComponent 中，它会比较 state 或 props 的变化来重新渲染组件。纯组件增强了代码的简洁性和应用程序的性能。

33) 什么是高阶组件 (HOC)？

在 React 中，高阶组件是一种重用组件逻辑的高级技术。它是一个接受组件并返回新组件的函数。换句话说，它是一个接受另一个函数作为参数的函数。根据官方网站，它不是 React API 中的一个特性（部分），而是 React 组件化性质产生的模式。

更多信息： React 高阶组件。

34) 可以用 HOC 做什么？

您可以使用 HOC 完成许多任务，其中一些如下：

• 代码重用性
• Props 操作
• State 操作
• 渲染劫持

35) Element 和 Component 有何区别？

Elements 和 Components 之间的主要区别是：

36) 如何在 React 中写注释？

在 React 中，我们可以像在 JavaScript 中一样写注释。可以有两种方式：

1. 单行注释：我们可以写成 /* Block Comments */，放在花括号里。

2. 多行注释：如果您想注释多行，可以这样做：

37) 为什么组件名称必须以大写字母开头？

在 React 中，组件名称必须以大写字母开头。如果我们用小写字母开头组件名称，它会抛出未识别标签的错误。这是因为在 JSX 中，小写标签名被视为 HTML 标签。

38) 什么是 Fragments？

它在 React 16.2 版本中引入。在 React 中，Fragments 用于组件返回多个元素。它允许您将多个子项分组，而无需向 DOM 添加额外的节点。

示例

声明 Fragments 也有一个快捷语法，但它在许多工具中不受支持。

更多信息： React Fragments。

39) 为什么 Fragments 比容器 div 更好？

• Fragments 更快，消耗的内存更少，因为它没有创建额外的 DOM 节点。
• 某些 CSS 样式（如 CSS Grid 和 Flexbox）具有特殊的父子关系，并在中间添加了 <div> 标签，这使得保持所需的布局变得困难。
• DOM Inspector 的干扰更少。

40) 如何在 React 中对 props 应用验证？

Props 验证是一种工具，有助于开发者避免未来的错误和问题。它使您的代码更具可读性。React 组件使用特殊的属性 PropTypes，它通过验证通过 props 传递的值的数据类型来帮助您捕捉错误，尽管不一定需要定义带有 propTypes 的组件。

我们可以使用 App.propTypes 在 React 组件中对 props 应用验证。当传递了某些无效类型的 props 时，您会在 JavaScript 控制台中收到警告。指定验证模式后，您需要设置 App.defaultProps。

更多信息： React Props 验证。

41) 什么是 create-react-app？

Create React App 是 Facebook 推出的一款用于构建 React 应用程序的工具。它允许您创建单页 React 应用程序。create-react-app 已经预先配置好，可以节省您在 Webpack 或 Babel 等方面的耗时设置和配置。您需要运行一个命令来启动 React 项目，如下所示：

此命令包含了构建 React 应用所需的一切。其中一些如下：

• 它包括 React、JSX、ES6 和 Flow 语法支持。
• 它包括 Autoprefixed CSS，因此您不需要 -webkit- 或其他前缀。
• 它包括一个快速、交互式的单元测试运行器，并内置了覆盖率报告支持。
• 它包括一个实时开发服务器，可以警告常见的错误。
• 它包括一个构建脚本，用于将 JS、CSS 和图像打包用于生产，并带有哈希和源映射。

更多信息： React 安装。

42) 如何在 React 中创建组件？

在 React 中创建组件有两种可能的方式：

函数组件：这是在 React 中创建组件的最简单方法。它们是纯 JavaScript 函数，将 props 对象作为第一个参数并返回 React elements。

类组件：类组件方法允许您使用 ES6 类来定义组件。上面的函数组件可以这样写：

43) 何时偏向于使用类组件而不是函数组件？

如果组件需要 state 或生命周期方法，我们应该使用类组件；否则，使用函数组件。然而，在 React 16.8 之后，随着 Hooks 的添加，您可以在函数组件中直接使用以前仅在类组件中可用的 state、生命周期方法和其他功能。

44) 网页浏览器能否直接读取 JSX？

网页浏览器无法直接读取 JSX。这是因为浏览器是为仅读取常规 JS 对象而设计的，而 JSX 不是常规的 JavaScript 对象。

如果您想让网页浏览器读取 JSX 文件，您必须将文件转换为常规的 JavaScript 对象。为此，可以使用 Babel。

45) 你对 React 中的 state 有什么理解？

在 React 中，组件的 state 是一个对象，它保存一些在其生命周期中可能发生变化的信息。最好尽量使您的 state 保持简单，并尽量减少有状态组件的数量。

让我们看看如何创建一个带有 message state 的用户组件。

State 非常类似于 props，但它是私有的，完全由组件控制。也就是说，直到所有者组件决定传递它，否则任何其他组件都无法访问它。

46) 与 ES5 语法相比，React 的 ES6 语法有哪些主要变化？/React 的 ES6 语法与 ES5 有何不同？

以下是在比较 ES6 和 ES5 时最明显的语法：

require vs import

ES5 语法

ES6 语法

export vs exports

ES5 语法

ES6 语法

component and function

ES5 语法

ES6 语法

props

ES5 语法

ES6 语法

状态

ES5 语法

ES6 语法

47) 你对 React 中的 props 有什么理解？

在 React 中，props 是组件的输入。它们是单个值或包含一组值的对象，在创建时通过类似于 HTML 标签属性的命名约定传递给组件。它们是从父组件传递到子组件的数据。

props 在 React 中的主要目的是提供以下组件功能：

• 将自定义数据传递给组件。
• 触发状态更改。
• 在组件的 render() 方法中使用 this.props.reactProp。

例如，让我们创建一个带有 reactProp 属性的元素：

这个 reactProp 名称成为附加到 React 原生 props 对象上的属性，该对象已存在于所有 React 库组件上。

React Refs 面试题

48) 你对 React 中的 refs 有什么理解？

Refs 是 React 中用于引用的缩写。它是一个属性，有助于存储对特定 DOM 节点或 React 元素的引用。它提供了一种访问 React DOM 节点或 React 元素以及如何与之交互的方式。当我们想更改子组件的值而不使用 props 时，它会被使用。

更多信息： React Refs。

49) 如何创建 refs？

Refs 可以通过使用 React.createRef() 来创建，并通过 ref 属性附加到 React 元素。当创建组件时，它通常被赋值给一个实例属性，然后可以在整个组件中引用。

50) 什么是 Forward Refs？

Refs 转发是一项功能，用于通过组件将其 ref 传递给其子组件之一。这可以通过使用 React.forwardRef() 方法来完成。它在高级组件中特别有用，并在可重用组件库中特别使用。

示例

51) 回调 refs 还是 findDOMNode() 是首选选项？

首选选项是使用回调 refs 而不是 findDOMNode() API。因为回调 refs 在 refs 设置和取消设置时提供了更好的控制，而 findDOMNode() 阻止了 React 将来进行某些改进。

推荐方法是：

52) Refs 的用途是什么？

React 中的 Ref 用于以下情况：

• 它用于返回对元素的引用。
• 当我们需要 DOM 测量时使用，例如管理焦点、文本选择或媒体播放。
• 它用于触发命令式动画。
• 在与第三方 DOM 库集成时使用。
• 它也可以用在回调中。

React Router 面试题

53) 什么是 React Router？

React Router 是一个标准路由库系统，构建在 React 之上。它用于通过 React Router 包在 React 应用程序中创建路由。它帮助您在应用中定义多个路由。它通过数据在浏览器中提供同步 URL，这些数据将在网页上显示。它维护应用程序的标准结构和行为，主要用于开发单页 Web 应用程序。

更多信息： React Router。

54) 为什么我们需要 Router 在 React 中？

React Router 在单页应用程序中显示多个视图方面发挥着重要作用。它用于在应用中定义多个路由。当用户在浏览器中输入特定 URL 时，如果此 URL 路径与路由器文件中的任何“路由”匹配，用户将被重定向到该特定路由。因此，我们需要将 Router 库添加到 React 应用中，它允许创建多个路由，每个路由都通向我们一个唯一的视图。

55) 列出 React Router 的优势。

React Router 的重要优势如下：

• 在此，无需手动设置浏览器历史记录。
• Link 用于导航应用程序中的内部链接。它类似于 anchor 标签。
• 它使用 Switch 功能进行渲染。
• Router 只需要一个子元素。
• 在此，每个组件都在 <Route> 中指定。
• 这些包被拆分为三个包，即 Web、Native 和 Core。它支持 React 应用程序的紧凑尺寸。

56) React Router 与传统路由有何不同？

React Routing 和 Conventional Routing 的区别是：

57) 为什么会出现“Router may have only one child element”（Router 只能有一个子元素）警告？

这是因为您没有将 Route 包装在 <Switch> 块或 <div> 块中，后者仅渲染一个路由。

示例

应该为

58) 为什么在 React Router v4 中使用 switch 关键字？

'switch' 关键字用于在多个定义的 Route 中仅渲染一个 Route。<Switch> 组件用于仅当路径匹配时才渲染组件。否则，它将返回到未找到的组件。

React Styling 面试题

59) 如何在 React 中使用样式？

我们可以在 React 应用程序中使用 style 属性进行样式设置，它会在渲染时动态计算样式。它接受一个 camelCased 属性的 JavaScript 对象，而不是 CSS 字符串。style 属性与在 JavaScript 中访问 DOM 节点上的属性一致。

示例

60) React 组件有多少种样式设置方式？

我们可以通过主要四种方式为 React 组件设置样式，如下所示：

• 内联样式
• CSS 样式表
• CSS 模块
• Styled Components

更多信息： React CSS。

61) 解释 React 中的 CSS 模块样式。

CSS Module 是一个 CSS 文件，其中所有类名和动画名称默认都是局部作用域的。它仅对导入它的组件可用，未经您的许可，它不能应用于任何其他组件。您可以创建带有 .module.css 扩展名的 CSS Module 文件。

62) 什么是 Styled Components？

Styled-Components 是一个用于 React 的库。它是 CSS Modules 的后继者。它使用增强的 CSS 为应用程序中的 React 组件系统设置样式，这些系统是用 JavaScript 和 CSS 的混合编写的。它作用域限于单个组件，不能泄露到页面中的任何其他元素。

styled-components 提供：

• 自动关键 CSS
• 无类名错误
• 更轻松地删除 CSS
• 简单的动态样式
• 无痛维护

63) React 中的 Hooks 是什么？

Hooks 是 React 16.8 版本中引入的新特性，它使我们能够在不编写类的情况下使用 state 和其他 React 功能。

请看下面的 useState hook 示例：

64) 使用 Hooks 在 React 中应遵循哪些规则？

我们必须遵循以下两个规则来在 React 中使用 Hooks：

• 您应该仅在 React 函数的顶层调用 Hooks，而不是在循环、条件或嵌套函数中调用。这是为了确保 Hooks 在每次组件渲染时以相同的顺序被调用，并且它还可以保留 Hooks 在多个 useState 和 useEffect 调用之间的状态。
• 您应该仅从 React 函数调用 Hooks。不要从常规 JavaScript 函数调用 Hooks。

65) React 中的表单是什么？

在 React 中，表单用于使用户能够与 Web 应用程序进行交互。以下是 React 中表单最常见用法列表：

• 表单使用户能够与应用程序进行交互。通过使用表单，用户可以与应用程序进行通信并在需要时输入所需信息。
• 表单包含某些元素，例如文本字段、按钮、复选框、单选按钮等，这些元素可以使应用程序更具交互性和美观性。
• 表单是获取用户输入的最佳方式。
• 表单用于许多不同的任务，例如用户身份验证、搜索、过滤、索引等。

66) 什么是错误边界或错误边界？

错误边界是 React 16 版本中引入的一个概念。错误边界提供了一种查找渲染阶段发生的错误的方法。任何使用以下一个或多个生命周期方法的组件都被认为是错误边界。让我们看看错误边界可以检测到错误的地方：

• 渲染阶段
• 在生命周期方法内部
• 在构造函数内部

让我们看一个例子来更好地理解它：

未使用错误边界

在上面的代码中，您可以看到当 counterValue 等于 2 时，它会在 render 方法中抛出错误。我们知道 render 方法中的任何错误都会导致组件被卸载，因此，要显示在 render 方法中发生的错误，我们使用错误边界。当我们不使用错误边界时，我们会看到一个空白页面而不是错误。

使用错误边界

我们之前已经说过，错误边界是使用以下一个或两个方法创建的组件：

• static getDerivedStateFromError
• componentDidCatch

请看下面的代码，我们创建了一个错误边界来处理渲染阶段的错误：

您可以在上面的代码中看到 getDerivedStateFromError 函数在 render 方法出现错误时渲染了备用 UI 界面。

componentDidCatch 会将错误信息记录到错误跟踪服务。

现在使用错误边界，我们可以如下渲染 CounterComponent：

67) 在哪些情况下错误边界不会捕获错误？

以下是一些错误边界不会捕获错误的情况：

• 错误边界不会捕获事件处理程序中的错误。
• 在服务器端渲染期间。
• 当错误发生在错误边界代码本身时。
• 使用 setTimeout 或 requestAnimationFrame 回调的异步代码。

React Redux 面试题

68) MVC 框架的主要问题是什么？

MVC 框架的主要问题是：

• DOM 操作非常昂贵。
• 它使应用程序运行缓慢且效率低下。
• 存在巨大的内存浪费。
• 它使应用程序调试变得困难。

69) 解释 Flux 概念。

Flux 是 Facebook 内部用于构建具有 React 的客户端 Web 应用程序的应用程序架构。它既不是库也不是框架。它是一种架构，它作为视图来补充 React，并遵循单向数据流模型的概念。当项目具有动态数据并且我们需要以有效的方式保持数据更新时，它很有用。

更多信息： React Flux 概念。

70) 什么是 Redux？

Redux 是一个开源 JavaScript 库，用于管理应用程序状态。React 使用 Redux 来构建用户界面。Redux 应用程序易于测试，并且可以在不同的环境中运行，表现出一致的行为。它由 Dan Abramov 和 Andrew Clark 于 2015 年首次推出。

React Redux 是 Redux 的官方 React 绑定。它允许 React 组件从 Redux Store 读取数据，并将 Actions 分派到 Store 以更新数据。Redux 通过提供一种合理的单向数据流模型来管理状态，从而帮助应用程序进行扩展。React Redux 在概念上很简单。它订阅 Redux store，检查您的组件想要的数据是否已更改，然后重新渲染您的组件。

更多信息： React Redux。

71) Redux 遵循的三个原则是什么？

Redux 遵循的三个原则是：

1. 单一真相来源：您整个应用程序的状态存储在单个 Store 中的一个对象/状态树中。单个状态树使得跟踪随时间变化更加容易。它也使得调试或检查应用程序更加容易。
2. State 是只读的：改变 State 的唯一方法是发出一个 Action，一个描述发生了什么的对象的。此原则确保视图和网络回调都不能直接写入 State。
3. 更改通过纯函数完成：要指定 Action 如何转换状态树，您需要编写 Reducer（纯函数）。纯函数将前一个 State 和 Action 作为参数，并返回一个新的 State。

72) 列出 Redux 的组件。

Redux 的组件如下：

• STORE： Store 是应用程序所有 State 的列表所在地。它就像一个大脑，负责 Redux 中所有移动的部分。
• ACTION：它是一个描述发生了什么的事件对象。
• REDUCER：它决定 State 如何改变。

73) 解释 Reducer 的作用。

Reducers 读取 Actions 中的载荷，然后相应地通过 State 更新 Store。它是一个纯函数，从初始 State 返回新的 State。如果没有需要执行的工作，它会原样返回之前的 State。

74) Store 在 Redux 中的意义是什么？

Store 是一个包含应用程序 State 的对象，并提供方法来访问 State、分派 Actions 和通过 subscribe(listener) 注册监听器。应用程序的整个状态树保存在一个 Store 中，这使得 Redux 简单且可预测。我们可以将中间件传递给 Store，它负责处理数据，并记录更改 Store State 的各种操作。所有 Actions 都通过 reducers 返回新的 State。

75) Redux 与 Flux 有何不同？

Redux 在以下方面与 Flux 不同：

76) Redux 有哪些优点？

React Redux 的主要优点是：

• React Redux 是 React 应用程序的官方 UI 绑定。它会与任何 API 更改保持同步，以确保您的 React 组件按预期运行。
• 它鼓励良好的“React”架构。
• 它在内部实现了许多性能优化，这使得组件仅在实际需要时才重新渲染。
• 它使代码维护变得容易。
• Redux 的代码以小巧、纯粹且隔离的函数形式编写，这使得代码可测试且独立。

77) 如何在组件外部访问 Redux store？

您需要从创建它的模块中导出 Store（使用 createStore() 方法）。此外，您需要确保它不会污染全局窗口空间。

一些最常问的 React MCQ

1) React 中的 Babel 是什么？

1. Babel 是一个转译器。
2. Babel 是一个解释器。
3. Babel 是一个编译器。
4. Babel 既是编译器又是转译器。

2) 你对 React 中的协调过程有什么理解？

1. 协调过程是 React 更新 DOM 的过程。
2. 协调过程是 React 删除 DOM 的过程。
3. 协调过程是 React 更新和删除组件的过程。
4. 它是设置 state 的过程。

3) 以下哪个用于将数据从 React 应用程序外部传递到组件？

1. setState
2. props
3. 带参数的 render
4. PropTypes

4) 以下哪个函数允许您在 HTML 页面上渲染 React 内容？

1. React.mount()
2. React.start()
3. React.render()
4. React.render()

5) 以下哪个显示了组件生命周期的正确阶段？

1. 挂载：getDerivedStateFromProps(); 更新：componentWillUnmount(); 卸载：shouldComponentUpdate()
2. 挂载：componentWillUnmount(); 更新：render(); 卸载：setState()
3. 挂载：componentDidMount(); 更新：componentDidUpdate(); 卸载：componentWillUnmount()
4. 挂载：constructor(); 更新：getDerivedStateFromProps(); 卸载：render()

6) 在 MVC（模型、视图、控制器）模型中，如何定义 React 的角色？

1. React 是 MVC 中的中间件。
2. React 是 MVC 中的控制器。
3. React 是 MVC 中的模型。
4. React 是 MVC 中的路由器。

7) 以下哪个是受控组件和非受控组件之间最精确的区别？

1. 在受控组件中，每次状态变异都会有一个关联的处理函数。另一方面，非受控组件在其内部存储状态。
2. 受控组件在其内部存储状态，而在非受控组件中，每次状态变异都会有一个关联的处理函数。
3. 受控组件擅长自我控制，而非受控组件则不知道如何控制自己。
4. 在受控组件中，每次状态变异都没有关联的处理函数，而在非受控组件中，它们不在其内部存储状态。

8) React 中组件的任意输入称为？

1. 键
2. Props
3. 要素
4. Ref

9) 你对 React 中的“key”prop 有什么理解？

1. “Key”prop 用于让它看起来漂亮，毫无益处。
2. “Key”prop 是 React 在“diffing”算法期间识别列表中新添加项并进行比较的一种方式。
3. “Key”prop 是 HTML 中的一个属性。
4. “Key”prop 不常用于数组。

10) 以下哪个是 Flux 概念的数据流的正确顺序？

1. Action->Dispatcher->View->Store
2. Action->Dispatcher->Store->View
3. Action->Store->Dispatcher->View
4. 以上都不是。