react基础（二）生命周期

react生命周期：

主要分3个阶段：

● 组件装载阶段（Mount）组件第一次渲染到Dom树

● 组件更新阶段（update）组件state，props变化引发的重新渲染

● 组件卸载阶段（Unmount）组件从Dom树删除

● 组件装载阶段（Mount）

constructor： 在此初始化state，绑定成员函数this环境，props本地化

● componentWillMount： 预装载函数，不能进行修改state的操作，即使做了，也不会进行新数据状态的渲染。在该函数中做的操作，都可以提前到构造函数中。

● render： 渲染函数，唯一的一定不能省略的函数，必须有返回值，返回null或false表示不渲染任何DOM元素。它是一个仅仅用于渲染的纯函数，返回值完全取决于this.state和this.props，不能在函数中任何修改props、state、拉取数据等具有副作用的操作。render函数返回的是JSX的对象，该函数并不因为这渲染到DOM树，何时进行真正的渲染是有React库决定的。（setState是一个异步函数）

● componentDidMount： 挂载成功函数。该函数不会再render函数调用完成之后立即调用，因为render函数仅仅是返回了JSX的对象，并没有立即挂载到DOM树上，而componentDidMount是在组件被渲染到DOM树之后被调用的。另外，componentDidMount函数在进行服务器端渲染时不会被调用。

组件更新阶段（update）

当组件挂载到DOM树上之后，props/state被修改会导致组件进行更新操作。更新过程会以此调用如下的生命周期函数：

● componentWillReceiveProps(nextProps)： 该函数在组件进行更新以及父组件render函数（不管数据是否发生了改变）被调用后执行，this.props取得当前的props，nextProps传入的是要更新的props。通常是比较this.props和nextProps来重新setState。

● shouldComponentUpdate(nextProps, nextState)： 返回bool值，true表示要更新，false表示不更新，使用得当将大大提高React组件的性能，避免不需要的渲染。

component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新,默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

● componentWillUpdate： 预更新函数。

● render： 渲染函数。

● componentDidUpdate： 更新完成函数。 相比装载过程的生命周期函数，更新过程的生命周期函数使用的相对来说要少一些。常用的是componentWillReceiveProps、componentShouldUpdate，前者经常用于根据前后两个数据去设置组件的状态，而后者则是常用于优化，避免不必要的渲染。

●组件卸载阶段（Unmount）

卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除前，会调用一次这个函数。这个函数经常用于去除componentDidMount函数带来的副作用，例如清除计时器、删除componentDidMount中创造的非React元素。

注意事项

setState

要修改state，只能使用this.setState()，不能使用this.state.value='myData' 类似方式设置state，一是不会驱动重新渲染，二是很可能被后面的操作替换，造成无法预知的错误。此外，React利用状态队列来实现setState的异步更新，避免频繁地重复更新state。当同时做了很多setState操作的时候，react会智能的合并成一个setState，当需要确定的setState完成后的操作，可以使用

setState({}, () => {
// 在这里进行state改变后的操作
})

setState的调用是有风险的，在某些生命周期函数中调用可能会无用甚至早恒循环调用导致崩溃。state的初始化一般在构造函数中实现；setState可以在装载过程的componentWillMount、componentDidMount中调用；setState可以在更新过程中的componentWillReceiveProps、componentDidUpdate中调用

render（）

render是一个异步函数，render执行后并不会直接生成Dom，而是生成虚拟Dom节点（模拟HTML Dom节点的一个javaScript数据结构），何时生成真实的DOM树取决于react框架本身的计算

常用的钩子

render（）这个方法必须有

只有通过这个才能初始化创建虚拟dom以及后续每次更新都是通过render来更新虚拟dom

compnentDidMount

该方法会在组件挂载后（插入DOM树后）立即调用。

componentDidUpdate

该方法会在组件更新后立即调用，首次渲染不会调用该方法

componentWillUnmount

该方法会在组件卸载或销毁之前调用。在此方法中执行必要的清理操作及取消订阅等，如清除timer, 取消滑动订阅。