个性化阅读
专注于IT技术分析

进阶面试题!16个最新前端React面试题:Redux面试题及答案详解

1、MVC框架的主要问题是什么?

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

DOM操作非常昂贵

应用程序运行缓慢,效率低下

有巨大的内存损耗

由于循环依赖关系,围绕模型和视图创建了一个复杂的模型

2、解释Flux

Flux是一种强制单向数据流的架构模式。

它控制派生的数据,并使用具有所有数据权限的中央存储来支持多个组件之间的通信。整个应用程序中的任何数据更新都必须只在这里发生,Flux为应用程序提供了稳定性,减少了运行时错误。

react Flux解析

3、Redux是什么?

Redux是当今市场上最热门的前端开发库之一。

它是JavaScript应用程序的可预测状态容器,用于整个应用程序的状态管理。

使用Redux开发的应用程序易于测试,可以在不同的环境中运行,表现出一致的行为。

4、Redux遵循的三个原则是什么?

单个事实来源:整个应用程序的状态存储在单个存储中的对象/状态树中。

单状态树使跟踪随时间的变化和调试或检查应用程序变得更容易。

状态是只读的:更改状态的惟一方法是触发一个动作。

一个动作是一个普通的JS对象,用来描述变化。

就像state是数据的最小表示一样,action是数据更改的最小表示。

使用纯函数进行更改:为了指定如何通过操作转换状态树,需要使用纯函数。

纯函数是那些返回值仅依赖于其参数值的函数。

5、你如何理解“单一数据源”?

Redux使用“Store”将应用程序的整个状态存储在一个地方。

因此,所有组件的状态都存储在存储中,它们从存储本身接收更新。

单状态树使跟踪随时间的变化和调试或检查应用程序变得更容易。

6、列出Redux的组件。

Redux由以下组件组成:

Action—它是一个描述所发生事情的对象。

它是一个决定状态如何变化的地方。

存储—整个应用程序的状态/对象树保存在存储中。

视图——简单地显示存储提供的数据。

7、如何通过Redux显示数据?

redux显示数据过程

8、如何在Redux中定义操作?

React中的操作必须具有type属性,该属性指示正在执行的操作的类型。

它们必须被定义为一个字符串常量,你还可以向它添加更多的属性。

在Redux中,操作是使用名为Action creator的函数创建的。

下面是Action和Action Creator的例子:

function addTodo(text) {
    return {
             type: ADD_TODO,    
              text    
 }
}

9、解析Reducer的作用。

Reducer是纯函数,它指定应用程序的状态如何随操作的变化而变化。

reduce通过获取以前的状态和动作来工作,然后返回一个新的状态。

它根据操作的类型确定需要执行哪种类型的更新,然后返回新值。

如果不需要做任何工作,它将返回以前的状态。

10、Store存储在Redux中的意义是什么?

存储是一个JavaScript对象,它可以保存应用程序的状态,并提供一些帮助方法来访问状态、分派操作和注册侦听器。

应用程序的整个状态/对象树保存在单个存储中。

因此,Redux非常简单和可预测。

我们可以将中间件传递给存储来处理数据,以及保存更改存储状态的各种操作的日志。所有操作都通过reduce返回一个新的状态。

11、Redux和Flux有什么不同?

Flux Redux
Store包含状态和更改逻辑 Store和更改逻辑是分开的
有多个Store 只有一个Store
所有的Store都是单元化的 带有层次reducer的单一存储
有单例调度程序 没有dispatcher的概念
React组件订阅该Store 容器组件使用connect
状态是可变的 状态不可变

12、Redux的优点是什么?

Redux的优势如下:

结果的可预测性——因为总是有一个真实的来源,即存储,所以对于如何将当前状态与操作和应用程序的其他部分同步,没有混淆。

可维护性——通过可预测的结果和严格的结构,代码变得更容易维护。

服务器端呈现—只需将在服务器上创建的存储传递到客户端。

这对于初始渲染非常有用,并提供了更好的用户体验,因为它优化了应用程序的性能。

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

社区和生态系统——Redux背后有一个巨大的社区,这使得它更容易使用。

一个庞大的人才社区为图书馆的改善和开发各种应用作出了贡献。

易于测试——Redux的代码主要是小的、纯的和隔离的函数。

这使得代码可测试且独立。

组织——Redux精确地定义了代码的组织方式,这使得代码在团队使用时更加一致和简单。

反应路由器-反应面试问题

13、什么是React路由器?

React Router是一个构建在React之上的强大路由库,它有助于向应用程序添加新屏幕和流。

这使URL与web页面上显示的数据保持同步。

它维护一个标准化的结构和行为,并用于开发单页面web应用程序。

React Router有一个简单的API。

14、为什么在React路由器v4中使用switch关键字?

虽然<div>被用来封装路由器内部的多条路由。

“switch”关键字用于只显示要在几个已定义路由中呈现的单个路由。

当使用<switch>标记时,它将按顺序将已定义的路由与类型URL匹配起来。

当找到第一个匹配项时,它将呈现指定的路由。

从而绕过剩下的路线。

15、为什么我们在React中需要一个路由器?

路由器用于定义多条路由,当用户输入一个特定的URL时,如果该URL与路由器内定义的任何“路由”路径匹配,则用户将被重定向到该特定路由。

因此,基本上,我们需要添加一个路由器库到我们的应用程序,允许创建多条路由,每一条都指向我们一个独特的视图。

<switch>
    <route exact path=’/’ component={Home}/>
    <route path=’/posts/:id’ component={Newpost}/>
    <route path=’/posts’   component={Post}/>
</switch>

16、列出React路由器的优点。

一些优势是:

就像React是基于组件的一样,在React Router v4中,API是“所有关于组件的”。

路由器可以被可视化为一个单独的根组件(<BrowserRouter>),其中我们包含了特定的子路由(<route>)。

不需要手动设置历史值:在React Router v4中,我们所需要做的就是在<BrowserRouter>组件中包装路由。

这些包是分开的:三个包,分别用于Web、Native和Core。

这支持应用程序的紧凑大小。

基于类似的编码风格很容易切换。

赞(0) 打赏
未经允许不得转载:srcmini » 进阶面试题!16个最新前端React面试题:Redux面试题及答案详解
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏