何为生命周期
vue中也有生命周期,就是组件从诞生到销毁所经的一系列过程,被称为生命周期。在这些过程中有着对应的钩子函数,在钩子函数中开发者可以注入代码,使组件在生命周期的相应阶段执行所需的逻辑功能。
仅讨论类组件的生命周期,因为函数式组件每次调用都是重新运行函数,立刻销毁旧组件
生命周期以16.0.0版本为界限有了比较多的改动,所以以此分为新旧两版生命周期
旧版生命周期(React < 16.0.0)
示意图如下:
1. constructor
组件最早调用的生命周期函数,这个阶段可以看成“组件的灵魂即将投胎”的时期,尚且是一张纯净的、一无所有的白纸,可以在这个阶段进行一些初始化操作,例如state的初始化。
constructor在组件的生命中只会调用一次,后续更新到销毁都不会再次调用。
值得注意的点是不可以在constructor中使用setState,因为状态更新会重新渲染组件,然而在这个阶段组件尚未挂载到真实dom中,会有一系列的问题。
2. componentWillMount
组件即将被挂载阶段,正常情况只允许一次,但是会有不正常情况,因此不建议在这里面使用setState
3. render
render返回的是一个虚拟DOM,这个虚拟DOM最终会被渲染到真实的DOM当中,这个函数运行在组件即将渲染的时候,因此不止一次运行,每次重新渲染都会调用到,所以不可以使用setState,会造成无限递归。
4. componentDidMount
组件完成初次渲染并且挂载到真实DOM之后的生命周期,在这个时刻由于已经挂载完毕,是可以使用setState的,一些网络请求、计时器也可以在此阶段进行,至于为什么不在之前进行,是因为这些操作都有一定的“延迟”,会出现页面加载的空白期。
这个周期也只会执行一次。
5. componentWillReceiveProps
组件在即将接收到新的属性时会触发的钩子函数,参数是新的属性对象,可能会有一些异常bug
6. shouldComponentUpdate
组件即将更新时触发,函数两个参数分别是新的属性与新的state,这个时候我们可以根据新属性与新状态进行判断,人为干涉组件是否进行更新,操作为返回true是更新,false为不更新,不对此函数进行定义的话默认是返回的true,状态修改组件更新。
7. componentWillUpdate
组件即将被渲染,emmmm目前没用到过
8. componentDidUpdate
组件渲染完毕,如果需要对dom进行一些附加改动可以在此阶段进行
9. componentWillUnmount
组件销毁前夕阶段,在之前阶段所定义的计时器之类的占用资源的操作,在此可以销毁,在组件销毁之前可以将其销毁