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 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。【关注尚硅谷，轻松学IT】子组件永远不能将 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 来工作，【关注硅谷，轻松学IT】然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。

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 关键字

虽然

** 用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。使用时，

** 标记会按顺序将已定义的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其他路线。

列出 React Router 的优点

几个优点是：

就像 React 基于组件一样，在 React Router v4 中，API 是 ‘All About Components’。可以将 Router 可视化为单个根组件（

），其中我们将特定的子路由（

）包起来。

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

组件中。

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

web前端培训React 泛型组件

前端React 开发中必须知道的5个技巧

前端开发之React框架入门学习

前端开发之多环境下react的配置