前端开发面试总结（三）

React生命周期

React的生命周期分为三个阶段：一、初始化，二、更新，三、销毁。

初始化阶段

• 一、getDefaultProps()：设置默认的props，也能够用defaultProps设置组件的默认属性。这个函数在React的生命周期中只会调用一次。
• 二、getInitialState()：在每个组件的实例中这个方法的调用只有一次，用来初始化每个实例的state，React的state和props的区别主要是state只存在与组件的内部，props能够在全部的实例中共享。
• 三、componentWillMount()：该方法只会在组件初始化的时候被调用，在组件存在期间则不会被调用。该方法在整个生命周期中只会被调用一次，能够修改state。
• 四、render()：render()函数在执行的过程当中，最重要的操做是建立虚拟DOM，运行diff算法，更新DOM树的操做都会在这个函数中进行。
• 五、componentDidMount()：该方法会在组件被渲染完成以后调用，并且只会被调用一次。

更新阶段

• 六、componentWillReceiveProps(nextProps)：该方法在组件初始化的时候不会被调用，当组件在接收新的props的时候才会调用这个函数。
• 七、shouldComponentUpdate(nextProps, nextState)：这是React性能优化过程当中最重要的一环，当组件在接收新的state或者props时会被调用。能够在这个函数中判断先后的两个props或者state是否相同，若是相同就返回false阻止DOM更新，这样一来就不须要再执行diff算法进行比较，也不用渲染新的DOM树，这样能够大幅度的提升代码运行的性能。能够人为的在这个方法中返回false，阻止DOM更新。
• 八、componentWillUpdate(nextProps, nextState)：组件初始化的时候不会调用这个函数，只有在组件将要发生更新以前调用这个函数，在这个函数中能够修改state。
• 九、render()：实现组件渲染。

卸载

• 十、componentWillUnmount()：该方法会在组件将要被卸载的时候调用。

生命周期函数在实例化阶段被调用的过程：

(1)当组件在客户端被实例化时，如下的函数将被依次调用

• 一、getDefaultProps()
• 二、getInitialState()
• 三、componentWillMount()
• 四、render()
• 五、componentDidMount()

(2)当组件在服务端被实例化时，如下的函数将被依次调用

• 一、getDefault()
• 二、getInitialState()
• 三、componentWillMount()
• 四、render()

render()方法

该方法在执行的时候会建立一个虚拟的DOM，用于表示对组件的输出，render()方法是每个组件都必需要有的方法，render()方法必需要知足如下几点：

• 一、只能经过this.props和this.state这两种方式访问数据。
• 二、render()方法能够返回null，false或者任何React组件。
• 三、render()只能返回一个顶级组件或者元素，不能够返回多个组件或者元素。
• 四、render()函数中不能改变组件的状态。
• 五、不能修改DOM的输出。
• 六、render()函数最终返回的不是真正的DOM元素，而是一个虚拟的DOM树。

componentDidMount()

这个方法不会在服务端被渲染的时候调用，该方法会在DOM渲染完成以后被调用，能够在该方法中使用this.getDOMNode()访问到真实的DOM。推荐使用ReactDOM.findDOMMode()得到真实的DOM元素。虚拟DOM只是存在于内存中的一种数据结构，只有在真正插入到文档中以后才会变成真正的DOM节点。

组件在存在期间，如下函数将会被依次调用

• 一、componentWillReceiveProps()
• 二、shouldComponentWillUpdate()
• 三、componentWillUpdate()
• 四、render()
• 五、componentDidMount()

Redux数据流的流程

Redux是一种Javascript状态容器，提供可预测的状态管理。可预测指的是根据一个固定的输入就能够获得一个固定的结果。

Redux的意义：随着单页面应用的普及，web app内部须要管理的状态也愈来愈多，这些状态有的来自于服务器，有用于交互的数据，有组件的状态，Redux就是用来对这些状态进行统一管理的。

Redux的三个原则：

• 一、单一的数据源：全部的state都被存储到一个单一的数据源store中。
• 二、state是只读的：state是只读的，能改变state的惟一方式就是经过触发action来修改state。
• 三、使用纯函数进行修改：须要编写reducers来描述action如何改变redux，reducers是一些纯函数，根据action返回对应的state，并且必需要有返回。

action

action能够用来修改state的值，并且action是修改state的惟一的方法。action是一个普通的javascript对象，该对象必须有一个type字段，表示action的名称，

reducer

reducer用于描述action如何对state进行修改，Reducer是一种纯函数。

store

store是redux的惟一的数据源。

使用Redux

• 安装Redux

npm install redux --save
复制代码

Redux如何实现多个组件之间的通讯？多个组件使用相同的状态如何管理？

Redux中提供了connect和provide来实现多个组件之间的通讯，管理多个组件使用的相同的状态。

connect()函数

export connect(mapStateToProps, mapDispatchToProps)(Home)
复制代码

• (1)mapStateToProps

mapStateToProps是一个函数，用于创建一个从外部的state对象到UI组件的props对象的映射关系。接收state做为参数，最终返回一个对象。mapStateToProps会订阅store，当state更新的时候就会自动执行。从新计算UI组件的参数，触发UI组件的从新渲染。

• (2)mapDispatchToProps

mapDispatchToProps是connect函数的第二个参数，用来创建UI组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户操做应该当作Action传给Store。

Provider

connect方法生成容器组件之后，须要让容器组件拿到state对象，才能生成UI组件的参数。Provider就是把咱们用Redux建立的store传递到内部的其余组件，让内部组件能够享有这个store并提供对state的更新。