React 生命周期事件的介绍

50 阅读3分钟

React类组件可以为几个生命周期事件设置钩子。

钩子允许功能组件也可以访问它们,以不同的方式。

在一个组件的生命周期中,有一系列的事件被调用,对每个事件你都可以钩住并提供自定义功能。

什么钩子最适合什么功能,我们将在这里看到。

首先,React组件的生命周期有3个阶段。

  • 安装
  • 更新
  • 解除挂载

让我们来看看这3个阶段的细节以及每个阶段被调用的方法。

安装

当安装时,在组件被安装到DOM中之前,你有4个生命周期方法:constructor,getDerivedStateFromProps,rendercomponentDidMount

构造器

构造函数是挂载组件时被调用的第一个方法。

你通常使用构造函数来设置初始状态,使用this.state = ...

getDerivedStateFromProps()

当状态依赖于道具时,getDerivedStateFromProps ,可以用来根据道具的值来更新状态。

它是在React 16.3中添加的,目的是为了取代componentWillReceiveProps 这个已经废弃的方法。

在这个方法中,你无法访问this ,因为它是一个静态方法。

这是一个纯粹的方法,所以它不应该引起副作用,并且在多次调用相同的输入时应该返回相同的输出。

返回一个包含状态更新元素的对象(如果状态没有变化,则返回null)

render()

从render()方法中,你返回构建组件界面的JSX。

这是一个纯粹的方法,所以它不应该引起副作用,并且在多次调用相同的输入时,应该返回相同的输出。

componentDidMount()

这个方法是你将用于执行API调用,或处理DOM上的操作。

更新

当更新时,在组件被挂载到DOM中之前,你有5个生命周期方法:getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdatecomponentDidUpdate

getDerivedStateFromProps()

这个方法见上面的描述。

shouldComponentUpdate()

这个方法返回一个布尔值,truefalse 。你用这个方法来告诉React是否应该继续重新渲染,默认为true 。当重新渲染的成本很高,并且你想更多的控制何时发生时,你会返回false

render()

请看上面关于这个方法的描述。

getSnapshotBeforeUpdate()

在这个方法中,你可以访问之前渲染的道具和状态,以及当前渲染的道具和状态。

它的用例非常小众,而且可能是你较少使用的一个。

componentDidUpdate()

当组件在DOM中被更新时,这个方法被调用。使用这个方法来运行任何第三方的DOM API或调用必须在DOM变化时更新的API。

它对应于安装阶段的componentDidMount() 方法。

解除挂载

在这个阶段,我们只有一个方法,componentWillUnmount

componentWillUnmount()

当组件从DOM中被移除时,该方法被调用。用这个方法来做任何你需要执行的清理工作。

遗产

如果你正在开发一个使用componentWillMountcomponentWillReceivePropscomponentWillUpdate 的应用,这些方法在React 16.3中被废弃,你应该迁移到其他生命周期方法。