2.1生命周期

生命周期

组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时侯运行。

生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁

旧版生命周期

React < 16.0.0

1.constructor

1.同一个组件对象只会创建一次
2.不能在第一次挂载到页面之前，调用setState，为了避免问题，构造函数中严禁使用setState

2.componentWillMount

1.正常情况下，和构造函数一样，他只会运行一次
2.可以使用setState，但是为了避免bug，不允许使用，因为在某些特殊情况下，该函数可能被调用多次

3.*render

1.返回一个虚拟DOM，会被挂在到虚拟DOM树中，最终渲染到页面的真是DOM中
2.render可能不只运行一次，只需要重新渲染，就会重新运行
3.严禁使用setState，因为可能会导致无限递归渲染

4.*componentDidMount

1.只会执行一次
2.可以使用setState
3.通常情况下，会将网络请求、启动定时器等一开始的操作，书写到该函数中

5.组件进入活跃状态

6.componentWillReceiveProps

1.即将接受新的属性值
2.参数为新的属性对象
3.该函数可能会导致一些bug，所以不推荐使用

*7.shouldComponentUpdate

1.指示Rreact是否要重新渲染该组件，通过返回true和false
2.默认情况下，会直接返回true

8.componentWillUpdate

1.组件即将被重新渲染

9.comonentDidUpdate

1.往往在该函数中使用dom操作，改变元素

*10.componentWillUnmount

1.通常在该函数中销毁一些组件依赖的资源，比如计时器

新版生命周期

React >= 16.0.0
React官方认为，某个数据的来源必须是单一的

1.getDerivedStateFrolProps

1.通过参数可以获取新的属性和状态
2.该函数是静态
3.该函数的返回值会覆盖掉组件状态
4.该函数几乎是没有什么作用

2.getSnapshotBeforeUpdate

1.真实的DOM构建完成，但还未实际渲染到页面中
2.在该函数中，通常用于实现一些附加的dom操作
3.该函数的返回值，会作为componentDidUpdate的第三个参数