react hooks的useEffect：

React 的 useEffect Hook 用于在函数组件中执行副作用操作（例如数据获取、订阅事件等），它类似于类组件中的生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

useEffect 接收一个回调函数和一个可选的依赖数组。

import { useEffect } from 'react';

useEffect(() => {
  // 在这里执行副作用操作

  // 返回一个清除函数（可选）
  return () => {
    // 在组件销毁之前执行清除操作
  };
}, [依赖数组]);

回调函数作为参数传递给 useEffect，它将在组件渲染后执行，每次组件更新时也会重新执行。

依赖数组是一个可选的参数，在数组中指定的依赖发生变化时， useEffect 将重新执行回调函数。如果省略了依赖数组，则每次组件更新时都会重新执行回调函数。

在回调函数中，我们可以进行各种副作用操作，比如订阅事件、发送网络请求、操作 DOM 等。

返回的清除函数（可选）将在组件销毁之前执行，用于清理副作用操作，比如取消订阅、清除定时器等。

以下是几个使用 useEffect 的示例：

1. 基本用法：在组件渲染后执行副作用操作。

   import { useEffect } from 'react';

   function MyComponent() {
   useEffect(() => {
   console.log('Component rendered');

    return () => {
      console.log('Component cleanup');
    };
   

   }, []);

   return null;
   }

2. 使用依赖项：在依赖项发生变化时执行副作用操作。

   import { useEffect, useState } from 'react';

   function MyComponent() {
   const [count, setCount] = useState(0);

   useEffect(() => {
   console.log(Count changed: ${count});

    return () => {
      console.log('Component cleanup');
    };
   

   }, [count]);

   return (
   

   
   <button onClick={() => setCount(count + 1)}>Increment</button>
   
   
   );
   }

3. 清理副作用操作：在组件销毁前执行清除操作。

   import { useEffect } from 'react';

   function MyComponent() {
   useEffect(() => {
   const subscription = subscribeToEvents();

    return () => {
      unsubscribeFromEvents(subscription);
    };
   

   }, []);

   return null;
   }

在这个例子中，我们订阅了一些事件，返回的清除函数会在组件销毁前取消订阅。

通过使用 useEffect Hook，我们可以将副作用操作集成到函数组件中，并根据需要进行清理操作，使组件更加灵活和可维护。