React组件的生命周期函数

前言

最近有点小忙。

一、React生命周期的概念

和Vue一样，在React组件创建、更新，销毁的过程中伴随的各种各样的函数执行。这些在组件特定的时期，被触发的函数，统称为组件的生命周期函数。

二、React生命周期

组件的生命周期可以分为三个阶段，我们也从这三个阶段依次介绍：

2.1 组件安装（Mounting）阶段

在创建组件实例并将其插入DOM时，将按以下顺序调用这些方法：

• constructor()
• static getDerivedStateFromProps() （react16版本后新增）
• render()
• componentDidMount()

constructor()构造函数

主要干两件事

1. 将对象分配给state来初始化本地状态。
2. 将事件处理程序方法绑定到实例上。

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

static getDerivedStateFromProps() 函数

这是React新增的生命周期函数，它的作用是根据props来派生出新的state。

static getDerivedStateFromProps(props, state) {
  console.log(props)
  return props
}

接受两个参数：组件的props和此刻的状态state，返回一个对象以更新状态，注意这个对象会和原来的state合并（相同的会替代，和 this.setState() 道理一样），也可以返回一个 null 表示什么都不更新。

Render()函数

该render()函数是个纯函数，主要负责返回React元素。

render()如果shouldComponentUpdate()返回false，将不会被调用。

componentDidMount()函数

componentDidMount()挂载组件（插入树中）后立即调用。需要DOM节点的初始化应在此处进行。一般也用来做两件事：

1、网络数据接口请求的好地方。

2、添加一些事件订阅（当然别忘了在componentWillUnmount()中取消订阅）

2.2 组件更新（Updating）阶段

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

shouldComponentUpdate(nextProps, nextState)函数

在组件更新的时候触发，此方法仅作为性能优化存在，如果shouldComponentUpdate()返回false，然后componentWillUpdate()，render()和componentDidUpdate()将不会被调用。以下是代码通过下一次参数是否改变来判断组件是否重新渲染（执行render函数）

// 判断组件 props是否更新
shouldComponentUpdate(nextProps, nextStates){
    return nextProps.content !== this.props.content
}

getSnapshotBeforeUpdate(prevProps, prevState)函数

getSnapshotBeforeUpdate()在将最新呈现的输出提交给DOM之前，立即调用（也就是说我的state已经更新了，但是还没有render，我可以在这里获取更新以前的一些DOM的信息）。它使您的组件可以在DOM可能发生更改之前从DOM中捕获一些信息（例如，滚动位置）。此生命周期方法返回的任何值都将作为参数传递给componentDidUpdate()。

componentDidUpdate(prevProps, prevState, snapshot)函数

componentDidUpdate()发生更新后立即调用，初始渲染不调用此方法。snapshot 参数就是getSnapshotBeforeUpdate(prevProps, prevState)函数返回的参数。

componentDidUpdate()如果shouldComponentUpdate()返回false，将不会被调用。

2.3 组件卸载（Unmounting）阶段

组件卸载阶段执行的函数一般只有componentWillUnmount()

componentWillUnmount()

componentWillUnmount() 在卸载和销毁组件之前立即调用。使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除在 componentDidMount() 中创建的所有订阅。

三、总结

这里只介绍了React主要的一些生命周期函数，有些官方不推荐使用或者将要废除的几个就没有介绍了。总的来说只要记住这几个比较重要的就行了，清楚每个这几个生命周期函数是用来干嘛的，解决了什么问题。