React JS 面试题（2022 年）

在一轮电话面试之后，您将不得不面对关于您的资格和技能的典型问题的步入式面试。 除了开放式问题的一般准备外，您还应该知道如何回答技术问题。

即使您以自信和魅力回答问题，您在回答技术问题时也必须准确。 我们整理了一些技术问题供您在面试前准备。

将这些视为您在 React JS 面试中可以预期的问题类型的示例。

Q.1) 解释 Real DOM 和 Virtual DOM 的区别？

Ans: Virtual DOM 更新速度更快，但不能直接更新 HTML。 如果元素更新，它可以更新 JSX。 如果您不想浪费内存，这是一个很好的选择，而且它也很容易操作。

另一方面，Real DOM 更新速度较慢，但​​可以直接更新 HTML。 但是，它们并不具有成本效益，因为从元素更新创建的 DOM 操作起来很昂贵。 除此之外，Real DOM 还需要大量的存储空间。

Q.2) 你如何描述“反应”？

Ans: Reach 由 Facebook 开发，它遵循基于组件的方法，有助于形成可重用的 UI 组件。 它是一个前端 JavaScrip 库，用于创建复杂的移动 UI 和交互式 Web。 React 于 2015 年开源，如今它拥有广泛的社区支持。

Q.3) 你能告诉我们使用 React 的主要优势吗？

Ans: React 提高了应用程序的性能效率，而且您可以在客户端和服务器端使用它。 由于 JSX，用 React 编写的代码是可读的，编写 UI 测试变得无忧无虑。 可以轻松地将 React 与 Angular 和 Meteor 等其他框架集成。

Q.4) React 的三个主要特性是什么？

Ans: React 使用虚拟 DOM 而不是真实的 DOM。 它在使用服务器端渲染时遵循数据绑定或单向流，

Q.5) 你认为 React 有什么限制吗？

Ans：是的，我认为对于初学者级别的程序员来说很难掌握，而且由于 JSX 和内联模板，编码会变得非常困难。 此外，作为一个广泛的框架，熟悉 React 需要时间。

Q.6) 描述虚拟 DOM 及其工作。

Ans: Virtual DOM 是真实 DOM 的副本，它是一个轻量级的 JavaScript 对象。 它是一个节点树，将所有属性、内容和元素作为对象及其属性列出。 React 中的 render 函数从其组件创建一个节点树。 当用户或系统执行多个操作时，它会不断更新树以响应数据模型的变化。

Virtual DOM 的工作遵循三个步骤：

1. 首先，即使数据有细微的变化，整个 UI 也会以 Virtual DOM 表示形式呈现。
2. 这会在新的和以前的 DOM 的表示之间产生差异，这是计算出来的。
3. 真正的 DOM 只会更新计算完成后更改的内容。

Q.7) 告诉我们你对 JSX 了解多少？

Ans: JSX 是 React 使用类似 HTML 的模板语法来利用 javascript 的表现力的文件。 它是 JavaScript SML 的简写，使任何 HTML 文件都易于掌握。 JSX 用于提高应用程序的效率和性能。

Q.8) 解释 React 和 Angular 之间的区别。

Ans： React 和 Angular 之间有一些主要区别，例如前者仅获得 MVC 视图而后者获得完整 MVC 视图的架构。 在渲染方面，Angular 有客户端渲染，而 React 有服务器端渲染。 React 使用虚拟 DOM 和单向数据绑定，Angular 使用真实 DOM 和双向数据绑定。 Angular 中的调试是运行时调试，而 React 有编译时调试。 最后，谷歌创建了 Angular，而构建 React 的功劳归于 Facebook。

Q.9) 道具是什么意思？

Ans: Props 是只读组件，应该保持不可变或纯，它是“React 中的属性”的简写。 在应用程序中，它们从父组件发送到子组件，这有助于保持数据的单向流动。 道具还有助于呈现动态生成的数据。

Q.10) React 中的状态是什么，你如何使用它们？

Ans： States 是 React 组件的灵魂，它们必须被简化，因为它们是数据源。 可以说状态是决定组件行为和渲染的对象。 可以对状态进行更改，因为它们在创建交互式和动态组件时是可变且有效的。

Q.11) 状态和道具之间的主要区别是什么？

Ans: props 中的父组件可以更改值，但不能在状态下发生。 但是，状态的组件内部有变化，但 props 并非如此。 与父组件类似，子组件也没有任何变化，但可以在 props 中观察到。

Q.12) state 和 props 的相似之处是什么？

Ans: state 和 props 的相似之处主要有三个。

1. 它们都从父组件接收初始值。
2. 在这两种情况下，您都可以在组件内设置默认值。
3. 在子组件中，您可以轻松设置初始值。

Q.13) 什么是有状态组件？

Ans：组件内存中的状态变化是由有状态组件存储的，它们也有权改变状态并知道状态中存在的所有变化。 无状态组件在通知它们所需的状态更改后发送道具。

Q.14) 我们所说的无状态组件是什么意思？

Ans：组件的内部状态是由无状态组件计算出来的，它们没有改变状态的权限。 他们缺乏关于现在、过去和未来状态变化的知识。 最后，有状态组件向它们发送道具，它们将其视为回调函数。

Q.15) 描述合成事件。

Ans：作为浏览器原生事件的跨浏览器包装器的对象称为合成事件。 它们的关键功能是通过组合多个浏览器的行为来创建一个 API。 这确保了跨不同浏览器的事件属性一致。

Q.16) 什么是 refs，什么时候应该使用它们？

Ans: Ref 表示 React 中的 References，它是一个属性，用于存储特定 React 组件或元素的引用。 组件中的渲染配置函数返回这些引用。 它们有助于向重要组件添加方法并获得 DOM 测量值。 我们还可以使用引用来管理焦点、选择媒体播放或文本。 此外，它们还有助于与第三方 DOM 库集成并触发命令式动画。

Q.17) 什么是受控组件？

Ans:控制组件不能维护自己的状态，父组件控制数据。 此外，它们在 props 的帮助下获取当前值，并使用回调来通知更改。

Q.18) 您对非受控组件了解多少？

Ans：不受控制的组件保持其状态。 在这里，与受控组件不同，DOM 控制数据。 他们还使用 refs 来导出他们的当前值。

Q.19) 陈述 Redux 的优势。

Ans: Redux 提供以下优点 –

• 组织：在 Redux 上团队合作变得更容易，因为它特别关注代码的组织，使其更加一致。
• 易于测试：代码是独立的、可测试的，因为它具有孤立的、小而纯的功能。
• 社区：Redux 拥有一个庞大而有才华的社区的支持，该社区在构建多个应用程序的同时不断改进库。
• 开发人员工具：开发人员可以轻松跟踪应用程序中的所有内容，从状态更改到操作。
• 服务器端渲染：在 redux 中，您只需要将 store 发送到客户端，由于应用程序的性能提升，因此可以提供更好的用户体验。
• 可维护性：代码具有严格的结构和可预测的结果，使其更易于维护。
• 结果的可预测性：将当前状态操作与应用程序的某些部分同步不会混淆，因为只有一个存储源。

结论

如果你有恒心和专注，学习 React Js 并不复杂。 一旦你彻底了解了你的编程语言，你就可以轻松应对任何面试。 如果您现在只是在探索该语言或想加深您的知识，请查看我们的利物浦约翰摩尔大学计算机科学理学硕士。 这个为期 19 个月的课程包括一些最热门的工具，包括 React、Java、JavaScript、Spring、Hyperledger 和 Ethereum，仅举几例。

完成本课程后，您将对 React 有更深入的了解。 不仅如此，您还将有资格担任软件开发人员/工程师、全栈开发人员、区块链开发人员、云专家/架构师、网络安全工程师、数据工程师和 DevOps 工程师等高薪职位。