1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate
2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数(componentWillMount、componentWillReceivePorps,componentWillUpdate)
3.React16并没有删除这三个钩子函数,但是不能和新增的两个钩子函数(getDerivedStateFromProps、getSnapshotBeforeUpdate)混用。
注意:React17将会删除componentWillMount、componentWillReceivePorps,componentWillUpdate
4.React16新增了对错误处理的钩子函数(componentDidCatch)
一、React旧版本生命周期
Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
Javascript中文网是以前端进阶资源教程分享为主的专业网站,包括:前端、大厂面试题、typescript教程、程序人生、React.js……等,以帮助开发者成长为愿景的社区
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时相同。
作者:Sailing
链接:https://juejin.im/post/6894180064297451533
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com