关于React面试题汇总

浅浅的花香味﹌ 2022-03-20 14:16 244阅读 0赞

**1、redux中间件**

中间件提供第三方插件的模式，自定义拦截 **action -> reducer** 的过程。变为 **action -> middlewares -> reducer** 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

常见的中间件：

redux-logger：提供日志输出

redux-thunk：处理异步操作

redux-promise：处理异步操作，actionCreator的返回值是promise

**2、redux有什么缺点**

1.一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。

2.当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。

**3、react组件的划分业务组件技术组件？**

根据组件的职责通常把组件分为UI组件和容器组件。

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

两者通过React-Redux 提供connect方法联系起来。

具体使用可以参照如下链接：http://www.ruanyifeng.com/blog/2016/09/redux\_tutorial\_part\_three\_react-redux.html

**4、react生命周期函数**

这个问题要考察的是组件的生命周期

一、初始化阶段：

getDefaultProps:获取实例的默认属性

getInitialState:获取每个实例的初始化状态

componentWillMount：组件即将被装载、渲染到页面上

render:组件在这里生成虚拟的DOM节点

componentDidMount:组件真正在被装载之后

二、运行中状态：

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

三、销毁阶段：

componentWillUnmount:组件即将销毁

**5、react性能优化是哪个周期函数？**

shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。

详细参考：

https//segmentfault.com/a/1190000006254212

**6、为什么虚拟dom会提高性能?**

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

具体实现步骤如下：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

参考链接：

https://www.zhihu.com/question/29504639?sort=created

**7、diff算法?**

把树形结构按照层级分解，只比较同级元素。

给列表结构的每个单元添加唯一的key属性，方便比较。

React 只会匹配相同 class 的 component（这里面的class指的是组件的名字）

合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。

参考链接：

https//segmentfault.com/a/1190000000606216

**8、react性能优化方案**

（1）重写shouldComponentUpdate来避免不必要的dom操作。

（2）使用 production 版本的react.js。

（3）使用key来帮助React识别列表中所有子组件的最小变化。

参考链接：

https://segmentfault.com/a/1190000006254212

**9、简述flux 思想**

Flux 的最大特点，就是数据的"单向流动"。

1.用户访问 View

2.View 发出用户的 Action

3.Dispatcher 收到 Action，要求 Store 进行相应的更新

4.Store 更新后，发出一个"change"事件

5.View 收到"change"事件后，更新页面

参考链接：

http://www.ruanyifeng.com/blog/2016/01/flux.html

**10、React项目用过什么脚手架？Mern? Yeoman?**

Mern：MERN是脚手架的工具，它可以很容易地使用Mongo, Express, React and NodeJS生成同构JS应用。它最大限度地减少安装时间，并得到您使用的成熟技术来加速开发。

参考链接：http://www.open-open.com/lib/view/open1455953055292.html

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关关于RabbitMQ面试题汇总

RabbitMQ常见面试题汇总，看这一篇就够了！！！

逃离我推掉我的手/ 2024年05月06日 09:51/ 0 赞/ 64 阅读

相关关于网络面试题汇总

关于网络所有常见的面试题汇总，看这一篇足够了！！！

约定不等于承诺〃/ 2024年05月06日 09:50/ 0 赞/ 71 阅读

相关关于JVM面试题汇总

这是一篇关于JVM绝大部分面试题汇总，包含所有面试中会出现的面试题万字汇总，看着一篇就完全足够！！！

╰半夏微凉°/ 2024年05月06日 09:50/ 0 赞/ 70 阅读

相关关于HTML面试题汇总之H5

一、H5有哪些新特性，移除了哪些元素？如何处理h5新标签的浏览器兼容性问题，如何区分html和html5 1. html5不在是SGL（通用标记语言）的一个子集，而包含了

男娘i/ 2024年03月16日 17:27/ 0 赞/ 59 阅读

相关关于HTML面试题汇总之H5

一、H5有哪些新特性，移除了哪些元素？如何处理h5新标签的浏览器兼容性问题，如何区分html和html5 1. html5不在是SGL（通用标记语言）的一个子集，而包含了

布满荆棘的人生/ 2022年09月24日 12:18/ 0 赞/ 161 阅读

相关常见react面试题汇总

React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () {

一时失言乱红尘/ 2022年09月02日 05:19/ 0 赞/ 205 阅读

相关面试题汇总

<table> <thead> <tr> <th>序号</th> <th><strong>问题描述</strong></th> <th

太过爱你忘了你带给我的痛/ 2022年05月23日 08:51/ 0 赞/ 337 阅读

相关关于React面试题汇总

1、redux中间件中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reduce

浅浅的花香味﹌/ 2022年03月20日 14:16/ 0 赞/ 245 阅读

相关常见react面试题汇总（适合中级前端）

已经开源地址：[https://github.com/nanhupatar...][https_github.com_nanhupatar...] 关注我们团队：

╰+攻爆jí腚メ/ 2022年03月01日 06:22/ 0 赞/ 315 阅读

相关面试题汇总

HTML html5有哪些新特性?移除了哪些元素？ Doctype作用，HTML5 为什么只需要写<!DOCTYPE HTML>？简述一下你对HTML语义化的理解？

分手后的思念是犯贱/ 2021年12月23日 16:47/ 0 赞/ 449 阅读