一些关于React的常见面试题（分享）
【相关专题推荐：react面试题（2020）】
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方法联系起来。
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算法，可以极大的提高性能。
6、为什么虚拟dom会提高性能?
答：虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
具体实现步骤如下：
1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中；
2.当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异；
把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
7、diff算法?
答：1.把树形结构按照层级分解，只比较同级元素。
2.给列表结构的每个单元添加唯一的key属性，方便比较。
3.React 只会匹配相同 class 的 component（这里面的class指的是组件的名字）
4.合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
6．选择性子树渲染。开发人员可以重写shouldComponentUpdate提高diff的性能。
8、react性能优化方案
答：1）重写shouldComponentUpdate来避免不必要的dom操作。
2）使用 production 版本的react.js。
3）使用key来帮助React识别列表中所有子组件的最小变化
9、简述flux 思想
答：Flux 的最大特点，就是数据的"单向流动"。
1.用户访问 View
2.View 发出用户的 Action
3.Dispatcher 收到 Action，要求 Store 进行相应的更新
4.Store 更新后，发出一个"change"事件
5.View 收到"change"事件后，更新页面
10、React项目用过什么脚手架？Mern? Yeoman?
答：Mern：MERN是脚手架的工具，它可以很容易地使用Mongo, Express, React and NodeJS生成同构JS应用。它最大限度地减少安装时间，并得到您使用的成熟技术来加速开发。
11、你了解React吗？
答：了解，React是facebook搞出来的一个轻量级的组件库，用于解决前端视图层的一些问题，就是MVC中V层的问题，它内部的Instagram网站就是用React搭建的。
12、React解决了什么问题？
答：解决了三个问题： 1.组件复用问题， 2.性能问题，3.兼容性问题：
13、React的协议？
答：React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，如果你的产品跟facebook没有竞争关系，你可以自由的使用react，但是如果有竞争关系，你的react的使用许可将会被取消
14、了解shouldComponentUpdate吗？
答：React虚拟dom技术要求不断的将dom和虚拟dom进行diff比较，如果dom树比价大，这种比较操作会比较耗时，因此React提供了shouldComponentUpdate这种补丁函数，如果对于一些变化，如果我们不希望某个组件刷新，或者刷新后跟原来其实一样，就可以使用这个函数直接告诉React，省去diff操作，进一步的提高了效率。
15、React 的工作原理？
答：React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。
16、使用 React 有何优点？
答：1.只需查看 render 函数就会很容易知道一个组件是如何被渲染的
2.JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引用的
3.支持服务端渲染，这可以改进 SEO 和性能
4.易于测试
5.React 只关注 View 层，所以可以和其它任何框架(如Backbone.js, Angular.js)一起使用
17、展示组件(Presentational component)和容器组件(Container component)之间有何不同？
答：1.展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
2.容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源
18、类组件(Class component)和函数式组件(Functional component)之间有何不同？
答：1.类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
2.当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件
19、(组件的)状态(state)和属性(props)之间有何不同？
答：1. State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
2. Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。
20、应该在 React 组件的何处发起 Ajax 请求？
答：在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
21、何为受控组件(controlled component)？
答；在 HTML 中，类似 ,