React生命周期

React生命周期函数是在组件的生命周期中自动调用的方法，可以在特定时间点执行一些逻辑操作，帮助我们控制组件的行为和状态。

React的生命周期函数主要分为三类:

1. 挂载阶段(Mounting)

   • constructor: 在组件创建时调用，用于初始化组件的状态和绑定事件。
   • static getDerivedStateFromProps: 在组件被实例化之后，以及每次接收到新的props值之后，调用该函数，用于更新state。
   • render: 是将组件渲染到DOM节点上的函数， 必须有一个返回值并且只能返回一个 React 元素。它不应该修改组件的 state，直接与 DOM 互动或调用管理生命周期的方法等。
   • componentDidMount: 组件已经被装载到页面上之后，会在组件即将被挂载时执行，一般用于进行异步请求或订阅等操作。

2. 更新阶段(Updating)

   • shouldComponentUpdate: 每次 props 或 state 发生变化之后，都会在重新渲染组件之前调用该方法，返回布尔类型的值（true/false），表示是否需要重新渲染组件，默认返回true。
   • static getDerivedStateFromProps: 同在挂载阶段。
   • render: 同在挂载阶段。
   • getSnapshotBeforeUpdate: 在页面更新之前执行，获取DOM相关的信息（如滚动位置），返回值将传递给componentDidUpdate方法。
   • componentDidUpdate: 页面更新之后执行，一般用于重新渲染后进行一些额外的操作，例如更新页面数据、清除定时器等。

3. 卸载阶段(Unmounting)

   • componentWillUnmount: 当组件从页面中卸载时，在这个生命周期钩子函数中执行一些清除操作，如清除定时器、取消网络请求等。

此外，还有一些生命周期函数被标记为过时的(即 UNSAFE_ 前缀)，在React Fiber架构下，这些生命周期函数的功能已经被update和其他新API替代。为了兼容旧版本的React，仍然保留这些生命周期函数。