函数组件和类组件的生命周期深度剖析

前言

在学习任何框架原理之前，了解其生命周期是非常必要的，至少可以让我们明白在什么时候该做什么事情。不至于犯一些低级错误。React 16.8 版本正式发布了 Hook 机制，因此本文会分别讲解 Class Component 生命周期与 Function Component 生命周期。

类组件生命周期

组件创建阶段

constructor()

constructor() 方法是组件生命周期的第一个方法，在组件实例化时被调用。它主要用于初始化组件的 state 和绑定事件处理函数。

static getDerivedStateFromProps()

static getDerivedStateFromProps() 方法在组件首次挂载或组件接收到新的 props 时被调用。它主要用于根据新的 props 计算并更新组件的 state。

render()

render() 方法是组件生命周期的第三个方法，也是唯一一个必须实现的方法。它主要用于将组件的 state 和 props 渲染成虚拟 DOM。

组件挂载阶段

componentDidMount()

componentDidMount() 方法在组件首次挂载后被调用。它主要用于执行一些与 DOM 交互的操作，例如获取 DOM 元素的引用或发起网络请求。

组件更新阶段

shouldComponentUpdate()

shouldComponentUpdate() 方法在组件接收到新的 props 或 state 时被调用。它主要用于决定组件是否需要重新渲染。如果该方法返回 false，则组件不会重新渲染。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() 方法在组件更新之前被调用。它主要用于在组件更新之前获取一些信息，以便在 componentDidUpdate() 方法中使用。

componentDidUpdate()

componentDidUpdate() 方法在组件更新之后被调用。它主要用于执行一些与组件更新相关的操作，例如更新组件的 state 或重新计算一些数据。

组件卸载阶段

componentWillUnmount()

componentWillUnmount() 方法在组件卸载之前被调用。它主要用于执行一些与组件卸载相关的操作，例如取消网络请求或删除 DOM 元素的引用。

函数组件生命周期

组件创建阶段

useEffect()

useEffect() 是函数组件生命周期中唯一一个与类组件生命周期对应的方法。它在组件首次挂载或组件接收到新的 props 或 state 时被调用。它主要用于执行一些副作用操作，例如发起网络请求或更新 DOM。

组件更新阶段

useLayoutEffect()

useLayoutEffect() 方法与 useEffect() 方法类似，但它是在浏览器更新 DOM 之前被调用的。它主要用于执行一些与 DOM 布局相关的操作，例如更新组件的样式或位置。

组件卸载阶段

useCallback()

useCallback() 方法返回一个 memoized 回调函数，该函数在组件的生命周期内保持不变。它主要用于优化组件的性能，避免在每次组件重新渲染时都重新创建回调函数。

总结

以上就是 React 类组件和函数组件的生命周期的详细解析。通过理解组件生命周期的各个阶段，我们可以编写出更健壮、更稳定的 React 应用。