生命周期mount:
mounting装载创建
update更新
unmounting卸载
错误捕获
注意点:生命周期函数的 作用,什么之后用
只有类式组件有生命周期,函数式组件没有生命周期
mounting装载创建:——
Construct——只执行一次
作用:初始化实例
static getDerivedStateFromProps(prop,state)
有返回值,当返回值为null时,state不变;有值时,将返回对象中的属性和state的属性对应,并将state做相应修改;
作用:在render之前,可以改变state的机会,不改变,返回null
static getDerivedStateFromProps(props,state){
return null;
}
Render
作用:生产新的虚拟DOM
componentDidUpdate(p,s,shot)——只执行一次
作用:虚拟DOM变成真实的DOM,可以在页面看到视图,组件创建完成
用处:可以获取真实的DOM节点
componentDidMount(){
console.log(document.getElementById('root'))
}
update更新:——
static getDerivedStateFromProps(prop,state)
用处:父组件更新,(已挂载)子组件页更新,在子组件中更新state*****
父组件修改,因为state只在constructor的时候赋值,所以组件更新的时候,子组件的state是不修改的,可以通过这个静态函数修改state
static getDerivedStateFromProps(props,state){
return {
number: props.number
}
}
shouldComponentUpdate(nextProps,nextState)
作用:用于优化性能。如果是false就不需要走render,不用去重新计算
用处:返回bool,true——组件正常更新流程;false——后面的生命周期函数不会执行,界面不更新
Render
作用:
getSnapshotBeforeUpdate(prevProp,prevState)
必须有返回值,返回值不能为空;这个方法必须和componentDidUpdate一起使用。
作用:获取更新之前的快照,浏览器DOM结构还没有更新
用处:动画,浏览器大小,布局变化,元素宽高,位置。和原来的比较。之前滚动条的位置
componentDidUpdate(p,s,shot)
作用:更新完成之后,可以获取DOM,获取宽高
unmounting卸载:——
componentWillUnmount()——只执行一次
作用:
错误捕获:
compinentDidCatch(error,info)
作用:子组件生命周期出错,回退
流程图: