对依赖项更改执行不同的useEffect回调函数代码

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

function MyComponent() {
  const [data, setData] = useState([]);

  // 第一个useEffect，当依赖项为空数组时，只在组件挂载和卸载时执行一次
  useEffect(() => {
    console.log('Component mounted');

    // 在这里可以执行一些初始化操作，例如数据获取、订阅事件等

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

      // 在这里可以执行一些清理操作，例如取消订阅、清除定时器等
    };
  }, []);

  // 第二个useEffect，当依赖项data发生变化时执行
  useEffect(() => {
    console.log('Data changed');

    // 在这里可以根据data的变化执行一些逻辑操作
  }, [data]);

  // 第三个useEffect，当依赖项data和props.someProp发生变化时执行
  useEffect(() => {
    console.log('Data or someProp changed');

    // 在这里可以根据data和props.someProp的变化执行一些逻辑操作
  }, [data, props.someProp]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;