web 前端培训 react 面试题分享

​

以下文章来源于 lxWEB 前端程序

区分 Real DOM 和 Virtual DOM

什么是 React

1. React 是 Facebook 在 2011 年开发的前端 JavaScript 库。

2. 它遵循基于组件的方法，有助于构建可重用的 UI 组件。

3. 它用于开发复杂和交互式的 Web 和移动 UI。

4. 尽管它仅在 2015 年开源，但有一个很大的支持社区。

React 有什么特点？

React 的主要功能如下：

它使用**虚拟 DOM **而不是真正的 DOM。

它可以用服务器端渲染。

它遵循单向数据流或数据绑定。

列出 React 的一些主要优点

React 的一些主要优点是：

它提高了应用的性能

可以方便地在客户端和服务器端使用

由于 JSX，代码的可读性很好

React 很容易与 Meteor，Angular 等其他框架集成

使用 React，编写 UI 测试用例变得非常容易

React 有哪些限制

React 的限制如下：

React 只是一个库，而不是一个完整的框架

它的库非常庞大，需要时间来理解

新手程序员可能很难理解

编码变得复杂，因为它使用内联模板和 JSX

什么是 Props

Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据_前端培训。

React 中的状态是什么？它是如何使用的

状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与 props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。

React 组件生命周期的阶段是什么

React 组件的生命周期有三个不同的阶段：

*初始渲染阶段：*这是组件即将开始其生命之旅并进入 DOM 的阶段。

*更新阶段：*一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。

*卸载阶段：*这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

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

一些最重要的生命周期方法是：

componentWillMount**()** – 在渲染之前执行，在客户端和服务器端都会执行。

componentDidMount**()** – 仅在第一次渲染后在客户端执行。

componentWillReceiveProps**()** – 当从父类接收到 props 并且在调用另一个渲染器之前调用。

shouldComponentUpdate**()** – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回 true 否则返回 false。默认情况下，它返回 false。

componentWillUpdate**()** – 在 DOM 中进行渲染之前调用。

componentDidUpdate**()** – 在渲染发生后立即调用。

componentWillUnmount**()** – 从 DOM 卸载组件后调用。用于清理内存空间。

React 中的事件是什么

在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件。但是有一些语法差异，如：

用驼峰命名法对事件命名而不是仅使用小写字母。

事件作为函数而不是字符串传递。

事件参数重包含一组特定于事件的属性。每个事件类型都包含自己的属性和行为，只能通过其事件处理程序访问。

列出一些应该使用 Refs 的情况

以下是应该使用 refs 的情况：

• 需要管理焦点、选择文本或媒体播放时

• 触发式动画

• 与第三方 DOM 库集成

什么是纯组件

纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

React 中 key 的重要性是什么

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React Redux

MVC 框架的主要问题是什么

以下是 MVC 框架的一些主要问题：

对 DOM 操作的代价非常高

程序运行缓慢且效率低下

内存浪费严重

由于循环依赖性，组件模型需要围绕 models 和 views 进行创建

列出 Redux 的组件

Redux 由以下组件组成：

Action – 这是一个用来描述发生了什么事情的对象。

Reducer – 这是一个确定状态将如何变化的地方。

Store – 整个程序的状态/对象树保存在 Store 中。

View – 只显示 Store 提供的数据。

解释 Reducer 的作用

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

Store 在 Redux 中的意义是什么

Store 是一个 JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到 store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer 返回一个新状态。

Redux 有哪些优点

Redux 的优点如下：

结果的可预测性 - 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。

可维护性 - 代码变得更容易维护，具有可预测的结果和严格的结构。

服务器端渲染 - 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。

开发人员工具 - 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。

社区和生态系统 - Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。

易于测试 - Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。

组织 - Redux 准确地说明了代码的组织方式，这使得代码在团队使用时更加一致和简单。

React 路由

什么是 React 路由

React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页 Web 应用。React 路由有一个简单的 API。

为什么 React Router v4 中使用 switch 关键字

虽然 <div> ** 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，<switch>** 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它路线。

列出 React Router 的优点

几个优点是：

就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（<BrowserRouter>），其中我们将特定的子路由（<route>）包起来。

无需手动设置历史值：在 React Router v4 中，我们要做的就是将路由包装在 <BrowserRouter> 组件中。

包是分开的：共有三个包，分别用于 Web、Native 和 Core。这使我们应用更加紧凑。基于类似的编码风格很容易进行切换。