如何在一个组件中使用多个useEffect钩子？

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 第一个useEffect钩子的副作用逻辑
    console.log('useEffect 1');
    // 执行其他操作...
    return () => {
      // 在组件卸载时执行清理逻辑
      console.log('cleanup 1');
      // 执行清理操作...
    };
  }, [/* 依赖项 */]);

  useEffect(() => {
    // 第二个useEffect钩子的副作用逻辑
    console.log('useEffect 2');
    // 执行其他操作...
    return () => {
      // 在组件卸载时执行清理逻辑
      console.log('cleanup 2');
      // 执行清理操作...
    };
  }, [/* 依赖项 */]);

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

export default MyComponent;