react 类组件 和 函数组件 声明周期 对比

React 的类组件和函数组件在生命周期方面存在一些差异。以下是它们之间的对比：

类组件的生命周期

React 类组件的生命周期可以分为三个阶段：挂载、更新和卸载。

1、挂载阶段：

constructor()：组件实例化时调用，用于初始化状态和绑定方法。
componentWillMount()（已弃用）：在组件挂载前调用，但在React 17.0之后，该钩子已被废弃。
render()：渲染组件的UI。
componentDidMount()：组件挂载后调用，可以进行 DOM 操作或发起数据请求。

2、更新阶段：

shouldComponentUpdate()：在组件更新前调用，返回一个布尔值，决定是否进行更新。
componentWillUpdate()（已弃用）：在组件更新前调用，但在React 17.0之后，该钩子已被废弃。
render()：重新渲染组件的UI。
getSnapshotBeforeUpdate()：在 DOM 更新前被调用，可用于获取某些 DOM 的值（如滚动位置）。
componentDidUpdate()：组件更新后调用，用于处理更新前后的状态差异。

3、卸载阶段：

componentWillUnmount()：组件即将被卸载时调用，用于清理定时器或取消订阅等操作。

函数组件的生命周期

React 函数组件没有传统的生命周期方法，但在 React Hooks 的引入后，函数组件可以模拟类组件的生命周期。

1、初始化阶段：

useState()：用于在函数组件中添加状态。这类似于类组件的 state。
useEffect()：用于处理副作用，如 DOM 操作或数据请求。在首次渲染后和更新后都会调用，这类似于类组件的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

2、更新阶段：

useEffect()：当组件的 props 或 state 发生变化时，会重新运行 useEffect 中的函数。

3、卸载阶段：

useEffect()：在组件卸载前，可以通过在 useEffect 的清理函数中执行必要的清理操作（如清除定时器或取消订阅），来模拟 componentWillUnmount 的行为。
学习建议：

深入了解类组件和函数组件的基础概念和用法。
学习并理解类组件的生命周期方法及其用途。
学习 React Hooks，特别是 useState 和 useEffect，并理解它们如何模拟函数组件的生命周期。
通过编写实际项目中的组件来实践这些概念，以加深理解。
查阅官方文档和社区资源，以获取更多关于 React 生命周期和 Hooks 的信息