你不可不知道的React生命周期

640?wx_fmt=png

点小蓝字加关注!

作者:kim

来源:原创


写在前面


640?wx_fmt=png

咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入。作为一名集正义、智慧、颜值于一身的技术人,怎么受得了。于是借此机会,当一回正义小王子~呵。咱要拿结果去碾压这种忽悠人的行为。这也印证了一句老话:网上的东西不一定都是对的,实践才是检验真理的唯一标准......


那么大家稍稍往后退一退,接下来我要开始装逼了(哈哈哈)......


React生命周期简介


React生命周期指的是组件从创建到卸载的整个过程,每个过程都有对应的钩子函数,它主要有以下几个阶段:

1、挂载阶段  -  组件实例被创建和插入Dom树的过程

2、更新阶段  -  组件被重新渲染的过程

3、卸载阶段  -  组件从Dom树中被删除的过程


早在React16.3就开始对生命周期做了一些改动,React16.3新增了两个生命周期函数:

1、static getDerivedStateFromProps(nextProps, prevState)

2、getSnapshotBeforeUpdate(prevProps, prevState)


新增的特性:

1、static getDerivedStateFromError(error)

2、componentDidCatch(error, info)


同时Facebook声明将在React17版本将删除以下生命周期函数:

1、componentWillMount

2、componentWillReceiveProps

3、componentWillUpdate


保留以下生命周期函数:

1、UNSAFE_componentWillMount

2、UNSAFE_componentWillReceiveProps

3、UNSAFE_componentWillUpdate


React生命周期是学习React不可缺少的部分,所以学习React就不得不了解,搞懂它!希望这篇文章能够快速的帮到大家。


下面就以17版本做为划分,React16.3新增的两个周期函数归为17版本。下面将围绕生命周期的三个阶段以理论结合实战来详细操作一波......


17版本前生命周期


挂载阶段

这个阶段主要是做初始化操作,主要有这几个钩子函数:

static defaultProps

    -- 设置props的默认值


static propTypes 

    -- props数据类型检查


constructor(props) 

    -- 构造函数


componentWillMount() 

    -- 组件挂载前钩子


render() 

    -- 组件更新钩子


componentDidMount() 

    -- 组件挂载成功钩子,该过程组件已经成功挂载到了真实Dom上


或许有小伙伴会问static静态方法是咋肥事,简单来说是它不依赖构造函数,只跟类有关,可优先于构造函数执行。



更新阶段

这个阶段主要是做状态更新操作,主要有这几个钩子函数:

componentWillReceiveProps(newProps) 

    -- 父组件更新props钩子


shouldComponentUpdate()  

     --  组件是否更新钩子


componentWillUpdate()

    -- 组件更新前钩子


render() 

    -- 组件渲染钩子


componentDidUpdate() 

    -- 组件更新成功钩子



卸载阶段

这个阶段主要是从Dom树中删除组件的操作,它的钩子函数:

componentWillUnmount() 

    -- 组件将要被卸载的时候调用



640?wx_fmt=gif


下面准备了两个组件:

1、父组件 - parent.js

2、子组件 - children.js


界面效果如下:

640?wx_fmt=png


主要是演示下面几个过程,观察生命周期函数的执行流程:

1、组件初始化

2、父节点修改子节点的props

3、子节点修改内部状态state

4、组件强制刷新

5、组件卸载


父组件修改子组件props

updating

组件强制刷新

updating

组件初始化

mounting

子组件修改内部状态state

updating

得出结论

end

组件卸载

unmounting



01 class 组件初始化过程

父组件代码:640?wx_fmt=png640?wx_fmt=png

子组件代码:640?wx_fmt=png640?wx_fmt=png640?wx_fmt=png

组件初始化时控制台打印的信息:640?wx_fmt=png


02 class 组件更新过程

父组件更新子组件props控制台打印的信息:640?wx_fmt=png

子组件修改内部状态state控制台打印的信息:640?wx_fmt=png

子组件强制更新控制台打印的信息:640?wx_fmt=png


03 class 组件卸载过程

从父组件中卸载子组件控制台打印的信息:640?wx_fmt=png


1、从上面演示的几个过程中不难发现React的一个更新原理,只要父组件更新必然引起子组件的更新,不管子组件的props是否变化。组件是否需要更新取决于shouldComponentUpdate这个钩子函数,它的默认值为return true。false则代表不需要更新。这被称为“render浪潮”,性能上也会有所影响。


2、static defaultProps和static propTypes优先于constructor执行,因为如果父组件不向子组件传递props时,子组件会获取默认props并且进行静态类型检测:(把父组件传给子组件的props去掉,让子组件读取内部的默认props,并且修改它的静态类型)

640?wx_fmt=png

640?wx_fmt=png

640?wx_fmt=png

640?wx_fmt=png

640?wx_fmt=png


3、经过上面一系列的过程得出如下完整的17之前版本生命周期图:

640?wx_fmt=png



17版本生命周期


17版本新增了两个生命周期函数:

1、static getDerivedStateFromProps(nextProps, prevState)

2、getSnapshotBeforeUpdate(prevProps, prevState)


17版本删除了以下生命周期函数:

1、componentWillMount

2、componentWillReceiveProps

3、componentWillUpdate


所以在16.x版本中使用新生命周期时不可和这三个函数一起使用,否则会报错。


01 class 组件初始化过程

子组件代码:640?wx_fmt=png

组件初始化时控制台打印的信息:640?wx_fmt=png

02 class 组件更新过程

父组件更新子组件props控制台打印的信息:640?wx_fmt=png

子组件修改内部状态state控制台打印的信息:640?wx_fmt=png

子组件强制更新控制台打印的信息:640?wx_fmt=png

03 class 组件卸载过程

从父组件中卸载子组件控制台打印的信息:640?wx_fmt=png

1、static getDerivedStateFormProps(nextProps, prevState)在render前调用,在初始挂载以及后续更新时都会被调用。他应该返回一个对象来更新state。如果返回null则不更新任何内容。它接收两个参数,一个是传进来的nextProps和之前的prevState。


2、getSnapshotBeforeUpdate(prevProps, prevState)在更新阶段render后挂载到真实Dom前进行的操作,它使得组件能在发生更改之前从DOM中捕获一些信息。此组件返回的任何值将作为componentDidUpdate的第三个参数。


3、经过上面一系列的过程得出如下完整的17版本生命周期图:

640?wx_fmt=png



如果喜欢,请给老铁加个关注,后续还会有更多惊喜等着你!!!欢迎转发分享给更多有需要的朋友,爱你呦~~~么么哒~~~



已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页