咱今天聊的话题是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版本生命周期图: