常见的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方法联系起来。

四、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算法，能够极大的提升性能。

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

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

具体实现步骤以下：

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

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

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

七、diff算法?

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

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

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

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

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

八、react性能优化方案

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

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

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

九、简述flux 思想

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

1.用户访问 View

2.View 发出用户的 Action

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

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

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

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

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

十一、你了解React吗？

答：了解，React是facebook搞出来的一个轻量级的组件库，用于解决前端视图层的一些问题，就是MVC中V层的问题，它内部的Instagram网站就是用React搭建的。

十二、React解决了什么问题？

答：解决了三个问题： 1.组件复用问题， 2.性能问题，3.兼容性问题：

1三、React的协议？

答：React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，若是你的产品跟facebook没有竞争关系，你能够自由的使用react，可是若是有竞争关系，你的react的使用许可将会被取消

1四、了解shouldComponentUpdate吗？

答：React虚拟dom技术要求不断的将dom和虚拟dom进行diff比较，若是dom树比价大，这种比较操做会比较耗时，所以React提供了shouldComponentUpdate这种补丁函数，若是对于一些变化，若是咱们不但愿某个组件刷新，或者刷新后跟原来其实同样，就可使用这个函数直接告诉React，省去diff操做，进一步的提升了效率。

1五、React 的工做原理？

答：React 会建立一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会经过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

1六、使用 React 有何优势？

答：1.只需查看 render 函数就会很容易知道一个组件是如何被渲染的

2.JSX 的引入，使得组件的代码更加可读，也更容易看懂组件的布局，或者组件之间是如何互相引用的

3.支持服务端渲染，这能够改进 SEO 和性能

4.易于测试

5.React 只关注 View 层，因此能够和其它任何框架(如Backbone.js, Angular.js)一块儿使用

1七、展现组件(Presentational component)和容器组件(Container component)之间有何不一样？

答：1.展现组件关心组件看起来是什么。展现专门经过 props 接受数据和回调，而且几乎不会有自身的状态，但当展现组件拥有自身的状态时，一般也只关心 UI 状态而不是数据的状态。

2.容器组件则更关心组件是如何运做的。容器组件会为展现组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其做为回调提供给展现组件。容器组件常常是有状态的，由于它们是(其它组件的)数据源

1八、类组件(Class component)和函数式组件(Functional component)之间有何不一样？

答：1.类组件不只容许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态

2.当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可使用一个纯函数来建立这样的组件。这种组件也被称为哑组件(dumb components)或展现组件

1九、(组件的)状态(state)和属性(props)之间有何不一样？

答：1. State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是做为用户事件行为的结果。

2. Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，而且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，可是能够把其子组件的 props 放在一块儿(统一管理)。Props 也不只仅是数据--回调函数也能够经过 props 传递。

20、应该在 React 组件的何处发起 Ajax 请求？

答：在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载以前 Ajax 请求已经完成，若是是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起做用。在 componentDidMount 中发起网络请求将保证这有一个组件能够更新了。

2一、何为受控组件(controlled component)？

答；在 HTML 中，相似 <input>, <textarea> 和 <select> 这样的表单元素会维护自身的状态，并基于用户的输入来更新。当用户提交表单时，前面提到的元素的值将随表单一块儿被发送。但在 React 中会有些不一样，包含表单元素的组件将会在 state 中追踪输入的值，而且每次调用回调函数时，如 onChange 会更新 state，从新渲染组件。一个输入表单元素，它的值经过 React 的这种方式来控制，这样的元素就被称为"受控元素"。

2二、在 React 中，refs 的做用是什么？

答：Refs 能够用于获取一个 DOM 节点或者 React 组件的引用。什么时候使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。

2三、何为高阶组件(higher order component)？

答：高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最多见的多是 Redux 的 connect 函数。除了简单分享工具库和简单的组合，HOC最好的方式是共享 React 组件之间的行为。若是你发现你在不一样的地方写了大量代码来作同一件事时，就应该考虑将代码重构为可重用的 HOC。

24. 使用箭头函数(arrow functions)的优势是什么？

答：1. 做用域安全：在箭头函数以前，每个新建立的函数都有定义自身的 this 值(在构造函数中是新对象；在严格模式下，函数调用中的 this 是未定义的；若是函数被称为“对象方法”，则为基础对象等)，但箭头函数不会，它会使用封闭执行上下文的 this 值。

2. 简单：箭头函数易于阅读和书写

3. 清晰：当一切都是一个箭头函数，任何常规函数均可以当即用于定义做用域。开发者老是能够查找 next-higher 函数语句，以查看 this 的值

2五、为何建议传递给 setState 的参数是一个 callback 而不是一个对象？

答：由于 this.props 和 this.state 的更新多是异步的，不能依赖它们的值去计算下一个 state。

2六、除了在构造函数中绑定 this，还有其它方式吗？

答：可使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可使用箭头函数，但问题是每次组件渲染时都会建立一个新的回调。

2七、怎么阻止组件的渲染？

答：在组件的 render 方法中返回 null 并不会影响触发组件的生命周期方法

2八、当渲染一个列表时，何为 key？设置 key 的目的是什么？

答：Keys 会有助于 React 识别哪些 items 改变了，被添加了或者被移除了。Keys 应该被赋予数组内的元素以赋予(DOM)元素一个稳定的标识，选择一个 key 的最佳方法是使用一个字符串，该字符串能唯一地标识一个列表项。不少时候你会使用数据中的 IDs 做为 keys，当你没有稳定的 IDs 用于被渲染的 items 时，可使用项目索引做为渲染项的 key，但这种方式并不推荐，若是 items 能够从新排序，就会致使 re-render 变慢

2九、(在构造函数中)调用 super(props) 的目的是什么？

答：在 super() 被调用以前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的缘由则是便于(在子类中)能在 constructor 访问 this.props。

30、何为 JSX ？

答：JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的所有功能。JSX 生产 React "元素"，你能够将任何的 JavaScript 表达式封装在花括号里，而后将其嵌入到 JSX 中。在编译完成以后，JSX 表达式就变成了常规的 JavaScript 对象，这意味着你能够在 if 语句和 for 循环内部使用 JSX，将它赋值给变量，接受它做为参数，并从函数中返回它。

31何为 Children ？

答：在JSX表达式中，一个开始标签(好比<a>)和一个关闭标签(好比</a>)之间的内容会做为一个特殊的属性props.children被自动传递给包含着它的组件。

这个属性有许多可用的方法，包括 React.Children.map，React.Children.forEach， React.Children.count， React.Children.only，React.Children.toArray。

3二、在 React 中，何为 state？

答：State 和 props 相似，但它是私有的，而且彻底由组件自身控制。State 本质上是一个持有数据，并决定组件如何渲染的对象。

3三、什么缘由会促使你脱离 create-react-app 的依赖？

答；当你想去配置 webpack 或 babel presets。

3四、何为 redux ？

答：Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的惟一方式是在应用中触发 actions，而后为这些 actions 编写 reducers 来修改 state。整个 state 转化是在 reducers 中完成，而且不该该有任何反作用

3五、在 Redux 中，何为 store ？

答：Store 是一个 javascript 对象，它保存了整个应用的 state。与此同时，Store 也承担如下职责：

1. 容许经过 getState() 访问 state
2. 运行经过 dispatch(action) 改变 state
3. 经过 subscribe(listener) 注册 listeners
4. 经过 subscribe(listener) 返回的函数处理 listeners 的注

3六、何为 action ？

答；Actions 是一个纯 javascript 对象，它们必须有一个 type 属性代表正在执行的 action 的类型。实质上，action 是将数据从应用程序发送到 store 的有效载荷。

3七、何为 reducer ？

答：一个 reducer 是一个纯函数，该函数以先前的 state 和一个 action 做为参数，并返回下一个 state。

3八、Redux Thunk 的做用是什么？

答：Redux thunk 是一个容许你编写返回一个函数而不是一个 action 的 actions creators 的中间件。若是知足某个条件，thunk 则能够用来延迟 action 的派发(dispatch)，这能够处理异步 action 的派发(dispatch)。

3九、何为纯函数(pure function)？

答：一个纯函数是一个不依赖于且不改变其做用域以外的变量状态的函数，这也意味着一个纯函数对于一样的参数老是返回一样的结果。