React类组件可以为几个生命周期事件设置钩子。
钩子允许功能组件也可以访问它们,以不同的方式。
在一个组件的生命周期中,有一系列的事件被调用,对每个事件你都可以钩住并提供自定义功能。
什么钩子最适合什么功能,我们将在这里看到。
首先,React组件的生命周期有3个阶段。
- 安装
- 更新
- 解除挂载
让我们来看看这3个阶段的细节以及每个阶段被调用的方法。
安装
当安装时,在组件被安装到DOM中之前,你有4个生命周期方法:constructor,getDerivedStateFromProps,render 和componentDidMount 。
构造器
构造函数是挂载组件时被调用的第一个方法。
你通常使用构造函数来设置初始状态,使用this.state = ... 。
getDerivedStateFromProps()
当状态依赖于道具时,getDerivedStateFromProps ,可以用来根据道具的值来更新状态。
它是在React 16.3中添加的,目的是为了取代componentWillReceiveProps 这个已经废弃的方法。
在这个方法中,你无法访问this ,因为它是一个静态方法。
这是一个纯粹的方法,所以它不应该引起副作用,并且在多次调用相同的输入时应该返回相同的输出。
返回一个包含状态更新元素的对象(如果状态没有变化,则返回null)
render()
从render()方法中,你返回构建组件界面的JSX。
这是一个纯粹的方法,所以它不应该引起副作用,并且在多次调用相同的输入时,应该返回相同的输出。
componentDidMount()
这个方法是你将用于执行API调用,或处理DOM上的操作。
更新
当更新时,在组件被挂载到DOM中之前,你有5个生命周期方法:getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdate 和componentDidUpdate 。
getDerivedStateFromProps()
这个方法见上面的描述。
shouldComponentUpdate()
这个方法返回一个布尔值,true 或false 。你用这个方法来告诉React是否应该继续重新渲染,默认为true 。当重新渲染的成本很高,并且你想更多的控制何时发生时,你会返回false 。
render()
请看上面关于这个方法的描述。
getSnapshotBeforeUpdate()
在这个方法中,你可以访问之前渲染的道具和状态,以及当前渲染的道具和状态。
它的用例非常小众,而且可能是你较少使用的一个。
componentDidUpdate()
当组件在DOM中被更新时,这个方法被调用。使用这个方法来运行任何第三方的DOM API或调用必须在DOM变化时更新的API。
它对应于安装阶段的componentDidMount() 方法。
解除挂载
在这个阶段,我们只有一个方法,componentWillUnmount 。
componentWillUnmount()
当组件从DOM中被移除时,该方法被调用。用这个方法来做任何你需要执行的清理工作。
遗产
如果你正在开发一个使用componentWillMount 、componentWillReceiveProps 或componentWillUpdate 的应用,这些方法在React 16.3中被废弃,你应该迁移到其他生命周期方法。