React 入门第六天：理解组件生命周期与效果

在React学习的第六天，我深入探讨了组件的生命周期以及如何使用React的生命周期方法和副作用处理功能。这一天的学习让我对React组件的内部运作机制有了更清晰的理解，同时也帮助我更好地管理组件的状态和副作用。

1. 组件生命周期简介

React组件的生命周期指的是从组件创建到销毁的全过程。理解组件的生命周期对高效管理组件的状态和副作用至关重要。虽然函数组件主要依赖于Hooks来处理生命周期和副作用，类组件依然是学习生命周期的基础。

类组件的生命周期方法

类组件拥有多个生命周期方法，这些方法可以帮助你在组件的不同阶段执行特定的操作：

componentDidMount：组件挂载后调用。适合进行初始化操作，比如数据获取。
componentDidUpdate：组件更新后调用。适合处理更新后的操作，比如同步数据。
componentWillUnmount：组件卸载前调用。适合清理操作，比如清除定时器或取消网络请求。

以下是一个类组件的生命周期方法示例：

import React, {
    Component } from 'react';

class MyComponent extends Component {
   
  componentDidMount() {
   
    console.log('组件已挂载');
  }

  componentDidUpdate(prevProps, prevState) {
   
    console.log('组件已更新');
  }

  componentWillUnmount() {
   
    console.log('组件将卸载');
  }

  render() {
   
    return <div>这是一个类组件</div>;
  }
}

export default MyComponent;

函数组件中的副作用处理

函数组件通过useEffect Hook来处理副作用，这相当于类组件中的componentDidMount、componentDidUpdate和componentWillUnmount的组合。

import React, {
    useEffect, useState } from 'react';

function MyComponent