关于React面试题汇总

一、redux中间件

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

常见的中间件：

redux-logger：提供日志输出

redux-thunk：处理异步操做

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

二、redux有什么缺点

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

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

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

根据组件的职责一般把组件分为UI组件和容器组件。

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

二者经过React-Redux 提供connect方法联系起来。

具体使用能够参照以下连接：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

四、react生命周期函数

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

1、初始化阶段：

getDefaultProps:获取实例的默认属性

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

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

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

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

2、运行中状态：

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

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

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

render:组件从新描绘

componentDidUpdate:组件已经更新

3、销毁阶段：

componentWillUnmount:组件即将销毁

五、react性能优化是哪一个周期函数？

shouldComponentUpdate 这个方法用来判断是否须要调用render方法从新描绘dom。由于dom的描绘很是消耗性能，若是咱们能在shouldComponentUpdate方法中可以写出更优化的dom diff算法，能够极大的提升性能。

详细参考：

https//segmentfault.com/a/1190000006254212

六、为何虚拟dom会提升性能?

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

具体实现步骤以下：

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

当状态变动的时候，从新构造一棵新的对象树。而后用新的树和旧的树进行比较，记录两棵树差别

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

参考连接：

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

七、diff算法?

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

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

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

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

选择性子树渲染。开发人员能够重写shouldComponentUpdate提升diff的性能。

参考连接：

https//segmentfault.com/a/1190000000606216

八、react性能优化方案

（1）重写shouldComponentUpdate来避免没必要要的dom操做。

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

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

参考连接：

https://segmentfault.com/a/1190000006254212

九、简述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

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

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

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