React旧版本与React16中生命周期的区别

时间:2021-1-18 作者:admin

1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate

2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数(componentWillMount、componentWillReceivePorps,componentWillUpdate)

3.React16并没有删除这三个钩子函数,但是不能和新增的两个钩子函数(getDerivedStateFromProps、getSnapshotBeforeUpdate)混用。

注意:React17将会删除componentWillMount、componentWillReceivePorps,componentWillUpdate

4.React16新增了对错误处理的钩子函数(componentDidCatch)

一、React旧版本生命周期

1、子组件(child conponent)首次挂载

依次触发了Child组件的:

constructor,

componentWillMount,

render,

componentDidMount。

2、子组件props发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

componentWillReceiveProps,

shouldComponentUpdate,

componentWillUpdate,

render,

componentDidUpdate。

(2)shouldComponentUpdate返回false

只调用了Child组件的:

componentWillReceiveProps,

shouldComponentUpdate。

3、子组件state发生改变

依次调用了Child组件的:

shouldComponentUpdate,

componentWillUpdate,

render,

componentDidUpdate。

与2相比,3中缺少了componentWillReceiveProps,这是因为componentWillReceiveProps在组件接收到一个新的props时才会被调用(注:这个方法在第一次渲染时不会被调用)。

二、React16生命周期

1、子组件(child component)首次被挂载

依次触发了Child组件的:

constructor,

getDerivedStateFromProps,

render,

componentDidMount。

2、子组件props发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate,

render,

getSnapshotBeforeUpdate,

componentDidUpdate。

(2)shouldComponentUpdate返回false

只调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate。

3、子组件state发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate,

render,

getSnapshotBeforeUpdate,

componentDidUpdate。

(2)shouldComponentUpdate返回false

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate。

与2中修改子组件(child component)的props时相同。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。