1. 首页

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

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

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

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

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

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

一、React旧版本生命周期

Javascript中文网是以前端进阶资源教程分享为主的专业网站

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生命周期

Javascript中文网是以前端进阶资源教程分享为主的专业网站

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

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/4624.html

« VS Code 折腾记 – (19) 一些相对实用的编码体验插件(偏前端)
JavaScript预解析处理过程原来是这回事»
Flutter 中文教程资源

相关推荐

QR code