React 的生命周期函数有哪些?

开发 前端
React 中类组件的生命周期函数,分为挂载、更新、卸载三种。

大家好,我是前端西瓜哥。今天来过一下 React 类函数的生命周期。

类组件的生命周期

React 中类组件的生命周期函数,分为挂载、更新、卸载三种:

  1. UNSAFE_componentWillMount:组件即将挂载(废弃)。
  2. componentDidMount:组件挂载。
  3. UNSAFE_componentWillReceiveProps:父组件更新时,拿到最新 props(废弃)。
  4. shouldComponentUpdate:是否允许组件更新。
  5. UNSAFE_componentWillUpdate:组件即将更新(废弃)。
  6. componentDidUpdate:组件更新。
  7. componentWillUnmount:组件即将卸载销毁。

相关的拦截器:

  1. static getDerivedStateFromProps:拿到新的 props,然后对象返回值会合并到 state。

更新状态的方法:

  • setState(updater[, callback]):更新状态,并重渲染组件。需要注意的是,即使新的状态和旧的状态一样,组件还是会进行重渲染;
  • forceUpdate:强制更新,会跳过 shouldComponentUpdate 的判断逻辑。该方法常用于在 state 和 props 之外的数据源更新后的 UI 重渲染。

图示

旧版生命周期:

图片

新版生命周期:

图片

componentDidMount

该生命周期函数会在组件挂载的时候触发。所谓挂载,指的是真实 DOM 元素添加到文档树上。

使用场景是做一些初始化操作:

  1. 订阅事件。
  2. 请求数据。

componentDidMount() {
this.timerId = setInterval(() {
// 轮训订单是否完成等业务逻辑
}, 800);
}

componentDidUpdate

组件更新的时候调用 componentDidUpdate。组件挂载的时候不会触发。

该函数接收三个参数:

  1. preProps:组件更新前的 props。
  2. preState:组件更新前的 state。
  3. snapshot:配合 getSnapshotBeforeUpdate 使用,这个方法会在每次组件更新时,将返回值保存下来作为此次的快照。参数 snapshot 拿到的就是这个快照。

使用场景是放置状态改变时需要执行的逻辑:

  1. 用户点击 tab,切换了 id,在这个生命周期下检查 currentId 是否改变,如果改变,请求对应的数据。

其实我们在业务中最常使用的生命周期函数,因为前端绝大多数的场景是交互导致状态改变,并执行一些行为。

例子:

componentDidUpdate(preProps, preState) {
if (this.state.id !== preState.id) {
fetchData(this.state.id).then(res {
// 拿到数据后更新 state
})
}
}

componentWillUnmount

组件在卸载前会调用 componentWillUnmount。

通常都是做一些解除绑定的收尾工作,防止错误和内存泄漏:

  1. 取消订阅事件。
  2. 关闭定时器。
  3. 取消请求,如果当前有请求还在进行的话。
  4. 执行一些业务逻辑,比如关闭弹窗的时候保存正在编辑的数据。

例子;

componentWillUnmount() {
clearInterval(this.timerId)
}

static getDerivedStateFromProps

从 props 得到派生的 state。getDerivedStateFromProps 在挂载和更新的阶段都会被执行,并在 render 前触发。

它是类组件的静态属性,接收 props 和 state,然后它的返回值是个对象,会合并覆盖到 state 上。

例子:

static getDerivedStateFromProps(props, state) {
// 半受控的 input 组件,如果外部传入 props.value 就用外部的
// 否则用组件自己内部的 state.value
if (props.value) {
return {
value: props.value
}
}
}

该方法不推荐使用,很多场景其实并没有必要用到这个方法,因为它会引起 state 的突变,可读性并不好。因为如果你没看到这个方法,你可能会很奇怪 state 的改变怎么没有符合预期。能不用就不用。

shouldComponentUpdate

接收新的 props 和 state,由开发者自行决定是否进行重渲染。

会拿到新的 props 和 state,返回 true 表示要进行更新和重渲染,返回 false 则中断更新。准确来说,任何返回值都可以,它们会直接作为 if 语句的判断表达式进行判断。

如果返回了 false,状态会保持之前的样子。

强制更新(this.forceUpdate)不会走这个函数,因为你都说了要 “强制更新” 了。

shouldComponentUpdate(nextProps, nextState) {
// setState 方法即使更新的是个相同的值,组件还是会重渲染
// 一种防止重渲染的方法是在这里判断新旧两个状态是否相同
if(nextState.id === this.state.id){
return false
}
return true
}

被废弃的生命周期函数

一些生命周期函数因为容易产生 bug,以及在 react 底层重构后可能会在一次更新中多次被触发,现已废弃,并加上 ​​UNSAFE_​​ 前缀。

  1. UNSAFE_componentWillMount:组件即将挂载。
  2. UNSAFE_componentWillReceiveProps:当父组件更新时,该函数会被调用,并拿到最新的 props。此时 props 还未变更。第一次初始化时该函数不会被触发。该方法。
  3. UNSAFE_componentWillUpdate:组件即将更新。

结尾

以上就是 React 的一些生命周期函数。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2021-10-20 07:18:51

微信小程序函数

2013-08-01 09:40:51

Windows 8.1

2015-07-08 16:28:23

weak生命周期

2022-04-19 07:20:24

软件开发安全生命周期SSDLC应用安全

2010-07-14 10:48:37

Perl线程

2009-06-11 11:28:35

JSF生命周期

2012-04-28 13:23:12

Java生命周期

2011-06-16 09:31:21

ActivityAndroid

2009-06-18 13:32:39

Java线程生命周期

2012-01-16 09:00:56

线程

2013-07-29 05:11:38

iOS开发iOS开发学习类的'生命周期'

2009-06-17 15:06:50

Hibernate实体

2019-10-16 10:50:13

Linux内核测试

2013-08-19 17:03:00

.Net生命周期对象

2012-06-20 10:29:16

敏捷开发

2009-06-24 10:47:55

JSF生命周期

2021-07-19 05:52:29

网络生命周期网络框架

2010-07-14 10:59:15

Perl线程

2013-06-18 10:48:41

OpenSUSEOpenSUSE 12

2015-07-09 15:42:48

ios应用生命周期
点赞
收藏

51CTO技术栈公众号