注：这里写的生命周期只是我用到过，还有比较常用的钩子函数，个人觉得react的生命周期用的流畅，react技术应该挺不错的了
先看一张图，用久了，错多了，这个图也会慢慢看懂的
react中的state改变时，都会调用componentWillUpdate,render,componentDidUpdate,这三个方法来重新渲染DOM（shouldComponentUpdate这个方法默认返回true）。
1.componentWillMount
1.componentWillMount() 是在组件挂载(mount)之前被调用.
2.componentWillMount()是唯一一个在服务器端渲染(ssr)调用的生命周期钩子
3.关于 setState 在 componentWillMount 使用：可以使用。因为它是 render 方法之前被调用，因此 setState 也不会导致重绘(re-render)
2. componentDidMount
componentDidMount() 在组件挂载之后立即执行
在这个钩子里合适：
a).ajax 请求,(会引出一个面试题)
b).初始化DOM节点的操作
c).设置计时器 setTimeout 或者 setInterval (温馨提示，别忘了在componentWillUnmount 关闭这些计时器)
关于 setState 在 componentDidMount 使用： 可以使用。但是经常导致性能问题。当然非要在 render 前拿到 DOM 节点的大小和位置，是可以用的。
3. componentWillReceiveProps(nextProps)
1.组件初次渲染时不会执行componentWillReceiveProps；
2.当props发生变化时执行componentWillReceiveProps；
3.在这个函数里面，旧的属性仍可以通过this.props来获取；
4.此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。即可以根据属性的变化，通过调用this.setState()来更新你的组件状态，在该函数中调用 this.setState() 将不会引起第二次渲染。
5.也可在此函数内根据需要调用自己的自定义函数，来对prop的改变做出一些响应。
6.更新 state 的值(比如重置)
componentWillReceiveProps (nextProps,nextState) {
//其中接受一个参数是nextProps：为父组件传过来新的props,而 旧的属性还是可以通过this.props来获取！
//第一次render时是不会被调用的
//console.log(nextProps) 父组件传入的最新值
//console.log(this.props) 上一次加载的值
//组件初始化时不调用，组件接受新的props时调用。
//如果当前点击的按钮传入的参数，与上一次传入的参数不一样的判断
if(nextProps.farther!=this.props.farther){
console.log("发送"+nextProps.farther+"的请求")
this.setState({
children:nextProps.farther
})
}
}
注意：当父组件向子组件传递引用类型（或复合类型，比如对象、数组等）的属性时，要注意打印的this.props和nextProps的内容是一致的，因为引用类型在内存中只有一份，传值时是浅拷贝
4. shouldComponentUpdate(nextProps, nextState)
1.当改变state 或者 props 并且是在render之前会调用shouldComponentUpdate，说白了就是该钩子函数用于告诉 React 组件是否需要重新渲染。
2.shouldComponentUpdate 默认return true，如果return false componentWillUpdate、render、componentDidUpdate都将不会被调用。千万记住一点， 当return false时，当他们的 state 发生改变时，并不会阻止子组件(child component)进行重新渲染。
3.shouldComponentUpdate在两种情况下不会被调用:
组件初始化
使用forceUpdate的情况
4. shouldComponentUpdate 还有一个知识点就是和 react 组件性能优化相关的。你可以this.state 和 nextState、this.props 和 nextProps 做比较来决定出 return false 并告诉 react 可以不更新该组件。如果做的只是一些浅层的数据比较完全可以用 PureComponent 来代替(深层的嵌套数据PureComponent也无能为力)。react 不建议在 shouldComponentUpdate 做深层的对比或者用 JSON.stringify()，因为这样反而损害到性能。
附加生命周期table
| 生命周期 | 是否可以调用this.setState | 初始化是否执行 |
|---|---|---|
| componentWillMount | 可以 | 是 |
| componentDidMount | 可以 | 是 |
| componentWillReceiveProps | 可以 | 否 |
| shouldComponentUpdate | 不可以 | 否 |
| componentWillUpdate | 不可以 | 否 |
| componentDidUpdate | 可以 | 否 |
| componentWillUnmount | 不可以 | 否 |
特别特别特别注意：
①componentWillMount 和 componentWillReceiveProps 调用 setState 不会重复渲染(re-render)
②componentDidUpdate，不能直接 this.setState, 不然会溢出栈。需要对 prevProps 与 this.props 和 prevState 和 this.state 做一个判断再执行 this.setState。就类似while循环不能陷入死循环。
原作链接：https://www.jianshu.com/p/4d2838ae7b29