react基础学习二——生命周期

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

生命周期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)
作用：子组件生命周期出错，回退

流程图：