重学React(1)-认识生命周期

最近发现自己out了，对于react的认识已经跟不上时代了。所以觉得记录一下重学之路。
17年学习react的时候，那还是react14.x版本，生命周期是这样的

创建阶段：
componentWillMount
componentDidMount
render

更新阶段：

// 该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
使用好处：在这个生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。 可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染

componentWillReceiveProps(nextProps)

// 接受需要更新的数据，并返回一个布尔值（默认为true），true就表示要刷新，进入下一个步骤，false相反在初始化时或者使用forceUpdate时不被调用

shouldComponentUpdate(nextProps, nextState): boolean
componentWillUpdate
componentDidUpdate

卸载阶段：
componentWillUnmount

16.3后更新了一波

移除了很多生命周期，包括 componentWillReceiveProps componentWillMount componentWillUpdate，更新阶段的生命周期只留下了一个shouldComponentUpdate

根据官方的说法，以前需要利用被deprecate的所有生命周期函数才能实现的功能，也就是更新阶段shouldComponentUpdate之前的操作，都可以通过getDerivedStateFromProps的帮助来实现！！

同时还引入了一个新的生命周期函数 getSnapshotBeforeUpdate(prevProps, prevState): snapshot
这个函数会在render之后执行，而执行之时DOM元素还没有被更新，给了一个机会去获取DOM信息，计算得到一个snapshot（快照）,这个snapshot会作为componentDidUpdate的第三个参数传入。

16.4之后

最明显的就是getDerivedStateFromProps的作用于延长了，直接横跨整个mounting和updating阶段
用一个静态函数getDerivedStateFromProps来取代被deprecate的几个生命周期函数，就是强制开发者在render之前只做无副作用的操作，而且能做的操作局限在根据props和state决定新的state

参考资料：
https://zhuanlan.zhihu.com/p/38030418
这个大佬写的东西挺好的！