74 个最热门的 React JS 面试问题及答案

React 面试问题和答案

以下是 ReactJs 面试问题和答案，可以帮助应届毕业生和有经验的应聘者获得理想的工作。

1）什么是 Reactjs？

React 是一个 JavaScript 库，可轻松构建用户界面。它由 Facebook 开发。

---

2）React 是否使用 HTML？

不，它使用与 HTML 类似的 JSX。

免费 PDF 下载：React 面试问题与答案

---

3）React 何时首次发布？

React 于 2013 年 XNUMX 月首次发布。

---

4）请说出 React 的两个最显著的缺点

• 将 React 与 Rails 等 MVC 框架集成需要复杂的配置。
• React 要求用户了解将用户界面集成到 MVC 框架的知识。

---

5）说明真实 DOM 和虚拟 DOM 之间的区别

真实 DOM	虚拟DOM
更新速度比较慢。	其更新速度更快。
它允许从 HTML 直接更新。	它不能用于直接更新 HTML。
它浪费了太多内存。	内存消耗较少

---

6) React 中的 Flux 概念是什么？

Facebook 广泛使用 Flux 架构概念来开发客户端 Web 应用。它不是一个框架或库，而是一种补充 React 和单向数据流概念的新型架构。

---

7）在 React 中定义 Redux 术语

Redux 是一个用于前端开发的库。它是 JavaScript 应用程序的状态容器，用于应用程序状态管理。您可以在不同的环境中测试和运行使用 Redux 开发的应用程序。

---

8）Redux 中的“Store”功能是什么？

Redux 有一项名为“Store”的功能，可让您将应用程序的整个状态保存在一个地方。因此，它的所有组件的状态都存储在 Store 中，以便您直接从 Store 获取定期更新。单一状态树可帮助您跟踪随时间推移的变化并调试或检查应用程序。

---

9）Redux 中的动作是什么？

它是一个返回操作对象的函数。操作类型和操作数据始终存储在操作对象中。操作可以在 Store 和软件应用程序之间发送数据。Store 检索的所有信息均由操作生成。

---

10）说出 React 的重要特性

这里是 React 的重要特性。

• 允许您使用第三方库
• 自动化
• 更快的发展
• 简单且可组合
• 完全受 Facebook 支持。
• 通过单向数据绑定实现代码稳定性
• React 组件

---

11）解释无状态组件这个术语

无状态组件是纯函数，仅根据提供给它们的属性进行基于 DOM 的呈现。

---

12）解释 React Router

React Router 是一个路由库，它允许您向应用程序添加新的屏幕流，并且还可以使 URL 与页面上显示的内容保持同步。

---

13）React 生态系统中流行的动画包有哪些？

React 生态系统中流行的动画包有

• 反应运动
• 反应过渡组

---

14）什么是 Jest？

Jest 是 Facebook 基于 Jasmine 创建的 JavaScript 单元测试框架。它提供自动模拟创建和 jsdom 环境。它也可用作测试组件。

---

15）什么是调度员？

调度程序是应用程序的中心枢纽，您可以在其中接收操作并将有效负载广播到已注册的回调。

---

16）回调函数是什么意思？它的用途是什么？

当 setState 完成并重新渲染组件时，应调用回调函数。由于 setState 是异步的，因此它需要第二个回调函数。

---

17）解释高阶组件

高阶组件（简称 HOC）是一种重用组件逻辑的高级技术。它不是 React 的一部分 API，但它们是从 React 的组合特性中出现的一种模式。

---

18）解释演示部分

展示部分是允许您呈现 HTML 的片段。该片段的功能是展示标记。

---

19）React js 中的 Props 是什么？

Props 指的是属性，是一种将数据从父组件传递到子组件的方式。我们可以说，Props 只是组件之间的一种通信渠道。它总是从父组件传递到子组件。

---

20）React 中 super 关键字有什么用途？

super 关键字可帮助您访问和调用对象父级上的函数。

---

21）解释 JavaScript 中的yield标语

收益口号用于延迟和 简历 一个生成器函数，它被称为产量标语。

---

22）说出两种类型的 React 组件

两种类型的 React 组件是：

• 功能组件
• 类组件

---

23）解释 React js 中的合成事件

合成事件是一种跨浏览器包装器，用于封装浏览器原生事件。它帮助我们将各种浏览器的行为组合到信号 API 中。

---

24) 什么是 React State？

它是一个决定特定组件如何呈现及其行为的对象。状态存储可在 React 组件的整个生命周期内更改的信息。

---

25) 如何在 React js 中更新状态？

可以直接或间接地在组件上更新状态。

---

26）解释 React 中箭头函数的用法

箭头函数可以帮助您预测作为回调传递时的错误行为。因此，它可以完全防止由此引起的错误。

---

27）React 的生命周期步骤是什么？

React js 的重要生命周期步骤包括：

• 初始化
• 州/房产更新
• 销毁是 React 的生命周期

---

28）说明 Pros 和 State 之间的主要区别

两者的主要区别在于 State 是可变的，而 Pros 是不可变的。

---

29）解释 React js 中的纯组件

纯组件是最快的组件，只需一个 render() 就可以替换任何组件。它可以帮助您增强代码的简洁性和应用程序的性能。

---

30）什么样的信息控制 React 中的段？

控制片段的信息主要有两种：状态和属性

• 状态：会发生变化的状态信息，我们需要利用状态。
• 道具：道具由父级设置，并在部件的整个生命周期内确定。

---

31）什么是‘create-react-app’？

“create-react-app”是一个命令行工具，允许您创建一个基本的反应应用程序。

---

32）解释 React List 中 key 的用法

键允许您为每个列表元素提供稳定的身份。键应该是唯一的。

---

33）什么是 children 属性？

子 props 用于将组件作为属性传递给其他组件。你可以使用以下方式访问它

{props.children}

---

34）解释错误边界？

错误边界可帮助您在子组件的任何位置捕获 JavaScript 错误。它们最常用于记录错误并显示后备 UI。

---

35）空标签<>有什么用？

React 中使用空标签来声明片段。

---

36）解释严格模式

StrictMode 允许您对 React 组件运行检查和警告。它仅在开发版本上运行。它可以帮助您突出显示问题而无需渲染任何可见的 UI。

---

37）什么是反应门户？

Portal 允许您将子项渲染到 DOM 节点中。 创建门户方法 用于此。

---

38）什么是上下文？

React 上下文可帮助您使用 React 组件树传递数据。它可帮助您在各个 React 组件之间全局共享数据。

---

39）Webpack 有什么用？

Webpack 本质上是一个模块构建器。它主要在开发过程中运行。

---

40）React js 中的 Babel 是什么？

Babel 是一个 JavaScript 编译器，它可以将最新的 JavaScript（如 ES6、ES7）转换为大多数浏览器可以理解的普通 ES5 JavaScript。

---

41) 浏览器如何读取 JSX 文件？

如果您希望浏览器读取 JSX，则应使用 Babel 等 JSX 转换器替换该 JSX 文件，然后发送回浏览器。

---

42）在 React 中使用 MVC 架构的主要问题是什么？

以下是处理 MVC 架构时将面临的主要挑战：

• DOM 处理非常昂贵
• 大多数时候，应用程序运行缓慢且效率低下
• 因为循环函数，围绕模型和思想创建了一个复杂的模型

---

43）当表情超过一行时该怎么办？

那时多行 JSX 表达式就是您唯一的选择。

---

44）减少量是多少？

减量是处理状态的一种应用方法。

---

45）解释合成事件一词

它实际上是浏览器原生事件的跨浏览器包装器。这些事件具有接口 stopPropagation() 和 PreventDefault()。

---

46) 何时应将顶级元素用于函数元素？

如果你的元素有一个阶段或生命周期，我们应该使用顶级元素。

---

47) 如何在解析中共享元素？

利用 State，我们可以共享数据。

---

48）解释“和解”一词

当组件的状态或属性发生变化时，rest 会将渲染的元素与之前渲染的 DOM 进行比较，并在需要时更新实际的 DOM。此过程称为协调。

---

49）如何在不使用 setState() 函数的情况下重新渲染组件？

您可以使用 forceUpdate() 函数重新渲染任何组件。

---

50）你能在 React 中更新 props 吗？

您无法在 React js 中更新 props，因为 props 是只读的。此外，您无法修改从父级接收到的 props。

---

51）解释“重组”一词。

重组是提取过程 排列 对象。一旦该过程完成，您可以将每个对象分离到单独的变量中。

---

52）你能更新道具的价值吗？

由于 props 是不可变的，因此无法更新其值。

---

53）解释安装和拆卸的含义

• 将元素附加到 DCOM 的过程称为安装。
• 将元素从 DCOM 中分离的过程称为拆卸过程。

---

54) 'prop-types' 库有什么用？

“Prop-types”库允许您在最近的应用程序中对 props 和类似对象执行运行时类型检查。

---

55）解释 React Hooks

React hooks 允许您使用 State 和其他 React 功能，而无需编写类。

---

56）什么是片段？

您可以使用 fragment 关键字对子组件列表进行分组，而无需在 DOM 中使用任何额外节点。例如：

render() {

return (
);
}

---

57) createElement 和 cloneElment 的主要区别是什么？

• createElement 由 react 使用来创建 react 元素。
• cloneElement 用于克隆元素并传递新的 props。

---

58）什么是受控组件？

受控组件是控制输入元素的组件。

---

59）为什么需要使用 props.children？

这个 props.children 允许你将一个组件作为数据传递给其他组件。

---

60）列出 react-dom 包中的一些方法

react-dom 包的重要方法有：

• 使成为（）
• 水合物（）
• 创建门户（）
• 卸载组件AtNode（）
• 查找DOM节点（）

---

61）如何在 React 中进行服务端渲染？

我们可以使用reaction serve来进行服务端渲染。

---

62）说出 getInitialState() 和 constrained() 之间的区别？

如果你想通过扩展“React.Component”来创建一个组件，构造函数可以帮助你初始化状态。但是，如果你想使用“Reat.createClass”来创建，那么你应该使用“genInitiaState”。

---

63）什么是 refs？

Ref 是 DOM 元素的一个属性。refs 的主要目的是方便查找 DOM 元素。

---

64）ComponentWillMount() 是什么

componentWillMount() 用于在组件启动后进行 API 调用，并将值配置到状态中。要进行 API 调用，请使用 HttpClient（例如 Axios），或者我们可以使用 fetch() 来触发 AJAX 调用。

---

65）如何在店内分发数据？

我们可以将数据发送到另一个组件，该组件应该基于存储父组件的操作。

---

66）如何使用 redux 处理更多操作？

为了在更多操作流中创建相同的组件，我们在各个模块中使用相同的功能。

---

67）如何溢出减速器？

我们可以根据事件操作来展开救援。该操作应分为单独的模块。

---

68) 说出 React 中使用的任何五个预定义原型

React js 中使用的最重要的原型是：

• 数
• 绳子
• 排列
• 对象
• element

---

69）使用 bindActionsCreators 的目的是什么？

BindActionCreator 帮助您将基于动作调度器的事件绑定到 HTML 元素。

---

70）React 中的 REFS 是什么

Ref 是对元素的引用。大多数情况下应避免使用它。但是，有时当您需要直接访问 DOM 或组件实例时会使用它。

---

71）JSX 元素可以附加到其他 JSX 组件吗？

是的，您可以将 JSX 元素与其他 JSX 组件一起使用，这与嵌套 HTML 元素非常相似。

---

72）React 当前的稳定版本是什么？

React 的当前稳定版本是 17.5 版

---

73）说出 Redux 工作流特性的一个重要特性

Redux 工作流的重要特性包括：

• 重置：帮助您重置商店的状态
• 恢复：允许您回滚到上次提交的状态
• 清除：所有可能误触发的禁用操作都将被删除
• 提交：帮助您将当前状态设为初始状态。

---

74）阐述 React JS 和 React Native 之间的区别

React JS 是一个用于构建 UI 的前端开源 JavaScript 库，而 React Native 是一个开源移动框架，允许开发人员在 Android 和 iOS这些面试问题也会对你的口试有帮助