React面试题

TIP

从源码上进行回答面试题

1、React 是什么?

React是一个由 Facebook 开发和维护的开源 JavaScript 库，用于构建用户界面，特别是单页面应用程序（SPA）

它的主要特点

• 虚拟DOM：React 使用一个叫做虚拟 DOM 的内存中数据结构来跟踪实际 DOM 的变化。当组件的状态改变时，React 会创建一个新的虚拟 DOM 树并与之前的树进行比较，然后决定如何以最有效的方式更新实际的 DOM。
• 声明式编程：在 React 中，你只需描述 UI 应该如何根据不同的状态显示，而不是描述如何进行变化。这使得代码更容易理解和预测。
• JSX：React 引入了 JSX（JavaScript XML）语法，允许开发者在 JavaScript 代码中写入类似 HTML 的标记。这种结合使得 UI 逻辑更加直观。
• 组件化：React 以组件为中心，让开发者能够构建复杂的 UI 从小到大，通过组合不同的可重用组件。
• 单向数据流：React 组件通过 props 接收数据并显示它们，当数据发生变化时，组件会重新渲染。这种单向数据流使得状态管理更为清晰和可预测。
• 生态丰富
  1. 可与各种工具和库集成：尽管 React 专注于 UI，但它可以与各种状态管理工具（如 Redux 或 MobX）、路由库（如 React Router）以及其他前端工具和库一起使用。
  2. 跨平台：除了 Web 开发，Facebook 还推出了 React Native，它允许开发者使用相同的 React 概念来构建原生移动应用程序。

2.虚拟 DOM 的工作原理是什么?

虚拟 DOM（Virtual DOM）是 React 中的核心概念之一。为了理解它，首先需要知道直接操作真实的 DOM 是代价高昂的，因为这可能引起浏览器的重排和重绘，导致性能瓶颈。

以下是关于 React 中的虚拟 DOM 的详细解释：

• 定义：虚拟 DOM 是对真实 DOM 的轻量级表示。本质上是一个 JavaScript 对象，映射了真实 DOM 的结构和属性。
• 目的：虚拟 DOM 旨在最小化与真实 DOM 的交互次数，从而提高性能
• 工作机制：
  • 当初次渲染的时候，会先创建一个描述UI的虚拟DOM，然后由React负责把此虚拟DOM变成真实DOM并且渲染到页面
  • 当 UI 的某个部分发生变化时（例如，因为用户输入或新数据），React 会创建一个新的虚拟 DOM 树。接着，React 会将新的虚拟 DOM 树与上一个版本的虚拟 DOM 树进行比较，这一步被称为“差异化”（DOM-DIFF）。
  • 通过这一比较过程，React 能够确定真实 DOM 需要进行哪些最小的修改以反映新的 UI 状态。
  • 最后，React 将这些变化批量应用到真实的 DOM，这一步被称为“重新渲染”（reconciliation）。
• 优势：
  • 性能提高：通过批量更新真实 DOM，并只修改必要的部分，React 可以避免昂贵的 DOM 操作和不必要的重排/重绘。
  • 编程简化：开发者不必关心如何高效地更新 DOM。他们只需声明 UI 在各种状态下的外观，而 React 负责如何实现这一过程。
  • 跨平台：由于虚拟 DOM 只是 JavaScript 对象，因此 React 可以在不同环境中重复使用相同的逻辑，例如在 React Native 中。
• 局限性：
  • 虽然虚拟 DOM 提高了性能，但它并不是解决所有问题的银弹。在某些情况下，对真实 DOM 的直接操作可能更快。
  • 差异化和重新渲染仍然需要计算资源。对于大型应用或频繁的更新，开发者可能需要使用一些性能优化技巧。 总之，虚拟 DOM 是 React 如何快速和高效地更新 UI 的核心机制。通过将复杂的 DOM 更新逻辑抽象为简单的 JavaScript 运算，React 提供了一个强大且高性能的方法来构建动态 web 应用。

3.为什么 React 要使用 JSX?