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

点小蓝字加关注！

作者：kim

来源：原创

写在前面

咱今天聊的话题是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() 

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

下面准备了两个组件：

1、父组件 - parent.js

2、子组件 - children.js

界面效果如下：

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

1、组件初始化

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

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

4、组件强制刷新

5、组件卸载

父组件修改子组件props

updating

组件强制刷新

updating

组件初始化

mounting

子组件修改内部状态state

updating

得出结论

end

组件卸载

unmounting

01 class 组件初始化过程

父组件代码：

子组件代码：

组件初始化时控制台打印的信息：

02 class 组件更新过程

父组件更新子组件props控制台打印的信息：

子组件修改内部状态state控制台打印的信息：

子组件强制更新控制台打印的信息：

03 class 组件卸载过程

从父组件中卸载子组件控制台打印的信息：

得

出

结

论

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

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

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

17版本生命周期

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

1、static getDerivedStateFromProps(nextProps, prevState)

2、getSnapshotBeforeUpdate(prevProps, prevState)

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

1、componentWillMount

2、componentWillReceiveProps

3、componentWillUpdate

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

01 class 组件初始化过程

子组件代码：

组件初始化时控制台打印的信息：

02 class 组件更新过程

父组件更新子组件props控制台打印的信息：

子组件修改内部状态state控制台打印的信息：

子组件强制更新控制台打印的信息：

03 class 组件卸载过程

从父组件中卸载子组件控制台打印的信息：

得

出

结

论

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

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

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

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