2022 年你需要知道的 20 个 React 面试问题和答案

React 是当今市场上增长最快的 JavaScript 框架之一。 如果你是一名有抱负的前端开发人员，我们整理了一些重要的React 面试问题，可以帮助你学习所有主要概念。

使用 React 为单页或移动应用程序构建用户界面变得很舒服。 你最有可能在求职面试中被问及这个工具。 由于这个原因，React 认证和速成课程的需求量也很大。

所以，这里有一些最重要的React 面试问题，可以帮助你留下良好的第一印象。

热门 React 面试问题和答案

1.比较真实DOM和虚拟DOM

虽然真正的 DOM 更新慢，但它可以直接更新 HTML。 如果元素更新，它会创建一个新的 DOM。 但是，在这种情况下，DOM 操作成本很高，并且会导致大量内存浪费。

Virtual DOM 可以更快地更新并在元素更新时更新 JSX。 它不能直接更新 HTML。 但是在这个编程概念中，DOM 操作很容易。 并且不存在内存浪费的问题。

2. 简单解释 React

React 是 Facebook 于 2011 年开发的 JavaScript 库。它于 2015 年开源，在个人开发人员和公司社区中广受欢迎。 React 在开发复杂的交互式移动和 Web UI 时非常方便。 它使用基于组件的方法来构建可重用的组件。

3.列出React的一些特性

React 使用虚拟 DOM 和服务器端渲染。 而且，它遵循数据绑定的原则，这是一个单向的数据流。 这三个特性提供了对 React 的清晰概述。

4. React 有什么优势？ 另外，列出它的一些限制。

React 与 Meteor、Angular 等其他 JavaScript 框架集成并不难。使用此工具编写 UI 测试用例变得很方便。 对于客户端和服务器端来说，它都是一个简单易用的工具。 React 的另一个优点是它提高了应用程序的性能。 此外，由于 JSX，代码具有很高的可读性。

现在让我们看看一些缺点。

首先，React 是一个库，而不是一个成熟的框架。 内联模板和 JSX 可以使编码变得复杂，这可能是新手程序员可以掌握的任务。 由于 React 库非常庞大，因此理解它可能是一个耗时的过程。

5. 什么是 React JSX？

JSX 是 JavaScript XML 的缩写形式。 它将 HTML 标签转换为 React 元素，使用类似于 HTML 的语法捕捉 JavaScript 的表现力。 JSX 将 HTML 标签转换为反应元素。 这种类型的文件易于理解，并产生强大的高性能应用程序。

6. 浏览器可以读取 JSX 吗？

不，浏览器只能读取 JavaScript 对象。 所以，我们需要让浏览器能够读取 JSX。 本练习涉及将 JSX 文件转换为 JavaScript 对象，然后再将其传递给浏览器。 像 Babel 这样的变形金刚也可以用来做同样的事情。

7.解释虚拟DOM的工作原理

虚拟 DOM 最初是真实 DOM 的轻量级副本。 它是节点树形式的 JavaScript 对象。 React 中的渲染函数从包含元素、属性和对象属性的 React 组件创建一个节点树。 用户或系统的各种操作会导致数据模型发生突变并更新此树。 虚拟 DOM 中的三步过程按以下方式工作：

1. 当底层数据发生变化时，整个 UI 会重新渲染
2. 然后，将新的虚拟 DOM 表示与前一个进行比较，并计算差异
3. 考虑到实际的变化或差异，更新真实的 DOM

8. 区分 React 和 Angular。

与 React 中的虚拟 DOM 和单向数据绑定相比，Angular 使用真实的 DOM 和双向数据绑定。 它具有运行时调试，而不是像 React 那样的编译时调试。 此外，Angular 由 Google 维护，而 React 是 Facebook 产品。

9. “一切都是 React 中的一个组件。” 你同意吗？

React 应用程序的用户界面由称为组件的构建块组成。 这些组件将整个 UI 分解为独立的、可重用的部分。 然后这些片段独立于 UI 的其余部分进行渲染。

10. React 中 render() 的作用是什么？

React 中的每个组件都有一个 render()，它返回代表原生 DOM 组件的单个元素。 当需要呈现多个 HTML 元素时，元素会被组合在一起。 元素在结束标记内分组，如 <group>、<form>、<div> 等。无论何时调用，此函数都必须返回相同的结果。

这些是一些通用的React 面试问题和答案，可以帮助你做好准备。 让我们涵盖更多内容以加深对这些概念的理解。

11. React 中的 props 是什么？

属性在 React 中称为“道具”。 这些是只读的、不可变的组件，在整个应用程序中从父级传递给子级。 保持数据的单向流动是不可或缺的，尤其是在动态生成数据时。 因此，子组件无法将 props 发送回父组件。

12. 解释 React 中的状态

状态是使用 this.state() 访问的 React 组件的核心。 状态基本上是决定组件渲染和行为的数据源。 与道具不同，状态是创建交互式组件的可变对象。

阅读： Python 开发人员面试问答

13. React 组件的生命周期有哪些阶段？

React 组件的生命周期分为三个主要阶段。 这些是：

• 初始渲染：组件进入 DOM。
• 更新：组件在 props 或状态更改发生时更新或重新渲染。
• 卸载：组件被销毁并从 DOM 中移除。

14. React 中如何使用 refs？

我们可以返回对 render() 返回的特定元素的引用。 Refs 属性使这成为可能。 因此，refs 存储了对要由渲染配置函数返回的 React 组件的引用。 我们通常使用 refs 向组件添加方法或向 DOM 添加度量。

15. 受控组件与非受控组件

受控组件和非受控组件之间的主要区别在于，前者通过 props 获取当前值，后者通过 refs 获取当前值。 受控组件不会保持自己的状态，因为可以通过回调通知更改。 父组件控制它们的数据。 另一方面，不受控制的组件维护它们的状态，而 DOM 控制它们的数据。

阅读：顶级区块链面试问答

16. 解释 React 中的事件

在 React 中，诸如按键、鼠标悬停、点击等特定反应会触发称为事件的反应。 事件参数包含它自己的一组属性和行为，能够由事件处理程序单独访问。 事件作为函数传递并使用 camelCase 命名。

17. 通量是什么意思？

Flux 是一种架构模式，它通过减少运行时错误来为应用程序提供稳定性。 它使用中央“存储”来实现不同组件之间的通信，从而维护对数据的权限。 整个应用程序中的所有更新都必须仅在此处进行。

18. 什么是 Redux？ 它的组成部分是什么？

Redux 是一个可预测的状态容器，用于 JavaScript 应用程序的状态管理。 它使用单个状态树或“存储”将整个应用程序的状态存储在一个地方。

Redux 由以下部分组成：

• 动作：描述发生的事情的对象
• Reducer：确定状态将如何变化
• Store：包含对象和状态的整个应用程序的树
• View：显示Store给出的数据

阅读： MongoDB 面试问答

从世界顶级大学在线学习软件课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。

19、Reducers的意义是什么？

Reducers 指定应用程序的状态如何响应特定操作而改变。 根据活动的类型，reducers 确定需要哪些更新，然后返回新值。 如果不需要更改，它们将返回相同的先前状态。

20. 什么是 React 路由器？

React Router 是一个路由库，可帮助向 JavaScript 应用程序添加新的屏幕和流程。 您将此库添加到您的应用程序以创建多条路线，每条路线都指向一个独特的页面。 URL 与网页上显示的内容相匹配。

至此，我们已经涵盖了您在任何面试中都会遇到的大部分React 面试问题。 深入了解所有这些主题将有助于完成前端开发工作！

如果您有兴趣了解有关 React 的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发执行 PG 计划，该计划专为工作专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和作业，IIIT -B 校友身份、实用的实践顶点项目和顶级公司的工作协助。