Hi~
如果你是个react开发者，你肯定用过react的周期，熟悉的不能再熟悉了，但是我们还是炒一下隔夜饭，巩固一下姿势吧~
开始讲课啦.png
万事万物都免不了会经历一番“出生(Mount) => 成长(Update) => go die(Unmout)”的过程，React也会有这样的成长。
我们如何知道组件已经进入到哪个阶段呢？只能通过react暴露给我们的钩子函数来知晓，也就是在特定的阶段会执行的函数，也是本篇章的主要内容——react的钩子函数
一、出生
所谓的react出生，也就是页面在挂载前经历的几件大事
image.png
1、constructor()
人刚出生，是不是总会被赋予点什么属性啊，比如性别，身高等
等同于，组件的构造函数中，需要准备一系列对该组件定义的方法和状态。
ES6的规定中，constructor是类的默认方法，也就是说，该方法是在Class的类组件创建中出现，如果没有定义constructor方法，这个方法会被默认添加，也就是说每一个子类都会有constructor方法。
通过React.Component的方式创建出来的组件，其状态state是通过constructor来初始化的。
class MyComponent extends React.Component {//ES6的写法
constructor(props){
super(props)
}
//如果写上了constructor，就必须在函数中写上super(),此时组件才有this指向，否则会报错！
//以下省略...
}
2、getDefaultProps() 和 getInitialState()
被赋予属性的过程
这两个方法只适合React.createClass的方式创建出来的组件，用于获取默认的属性props和初始值state
其状态state是通过getInitialState配置组件相关状态
/ ** ES6的实现中去掉了getInitialState这个钩子函数，规定state在constructor中实现 **/
const MyComponent = React.createClass({//ES5的写法
getInitialState:function(){
//ES6创建的组件，state放在constructor中初始化
}
getDefaultProps:function(){
//ES6的class创建的组件，可以这样定义：MyComponent.defaultProps = {...}
return {
name:'xy'
}
}
//以下省略...
})
3、componentWillMount()
上手术台，准备接生的前奏
将要挂载到页面上，这个方法是唯一一个在render之前调用的生命周期。setstate并不会立即执行改变state，而是等到render方法执行后再进行改变state的，因此如果在这个周期进行状态变更，是没有任何作用的。（这里的知识点需要对setstate有一定了解）
注：componentWillMount()即将移除
4、render()
render是一个渲染的函数，变动的时机，咱们人长大的过程中，肯定是一个变化的过程的，同等于，react的整个生命周期，render是会多次执行的，不停变化中
5、componentDidMount()
孩子面世的那一刻
这个周期的调用，说明了react已经渲染了组件并且将组件插入DOM中。
所以如果有任何依赖于dom的初始化，可以写在这个周期中。这个方法中使用setState()，可触发重新渲染
以上的方法，除了render，在整个生命周期中，其他方法都只会执行一次~~~
image.png
二、成长中
1、componentwillReceiveProps()
一个人成长过程中，接收到的学习和成长，发生的改变
该方法接收新的props时调用，接收一个新的props为参数，这个参数是state发生更新之后的新值nextProps，在这个方法里，可以用this.props访问当前值,用nextProps访问即将更新的属性值，将新旧值进行计算，确定最后需要更新的状态，最终调用SetState对页面进行更新渲染。
注：componentWillReceiveProps()即将移除
2、shouldComponentUpdate()
成长过程中，面临每一个选择的时候，自身是否要妥协或者坚持。
接收到新的state或者props调用，可以在此去判断，是否继续render，返回值为true则渲染，false为阻止进一步render。
该函数是优化组件性能的重要的一环！！
不能在该函数中调用setState，调用setState会导致再次updateComponent，导致死循环。
3、componentWillUpdate()
注：componentWillUpdate()即将移除
不能在该函数中调用setState，调用setState会导致再次updateComponent，导致死循环。
4、render()
重新触发渲染
5、componentDidUpdate()
经历一次改变成功后
组件更新完成后调用，此时可以获取到dom节点。
image.png
三、准备go die路上
1、componentWillUnmount()
卸载前，销毁组件之前调用该方法
使用该方法清理页面的监听，定时器，断开网络请求等
以上的整个生命周期，每个人都有自己记忆和理解新事物的方法哈，可能有一些描述用词不当，欢迎大家指出来哈~
欢迎来质疑.png
关于componentWillMount、componentWillReceiveProps、componentWillUpdate三个周期即将被移除的问题解答
react v16.3出来之后，去掉了三个原来的生命周期，新增了两个周期函数
去除~
componentWillMount
componentWillReceiveProps
componentWillUpdate
新增~
static getDerivedStateFromProps
getSnapshotBeforeUpdate
取消componentWillMount的原因：
该钩子发生在首次render之前，如果在这个函数中执行初始化数据或者异步请求数据，渲染并不会等待数据返回后去渲染。官方建议数据初始化放在constructor，初始的异步请求放在componetDidMount
取消componentWillReceiveProps的原因：
该钩子是props更新时触发的，如果在componentWillReceiveProps直接调用父组件的某个setstate方法，会导致死循环。
替换成static getDerivedStateFromProps。
class MyComponent extends React.Component{
static getDerivedStateFromProps(nextProps,prevState){
//code
}
}
取消componentWillUpdate的原因：
替换成getSnapshotBeforeUpdate
class MyComponent extends React.Component{
static getSnapshotBeforeUpdate(preProps,prevState){
//code
}
}
网友评论