怎么在onMount里执行异步操作

在React组件中，在`onMount`生命周期钩子（现在已经被废弃，推荐使用`useEffect`）里执行异步操作通常是为了在组件挂载完成后初始化一些数据获取或者网络请求。由于`onMount`是在DOM加载并插入到文档树之后立即执行的，所以在里面可以安全地执行不会阻塞渲染的异步任务。以下是使用旧版`componentDidMount`和新版`useEffect`的例子：

**使用`componentDidMount`（已弃用）：**

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => { this.setState({ data }); // 更新状态 })
      .catch(error => console.error('Error fetching data:', error));
  }

  render() {
    // 使用this.state.data
  }
}

**使用`useEffect`（推荐）：**

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
    
    if (!data) { // 初始渲染只执行一次
      fetchData();
    }
  }, []); // 第二个空数组表示仅在组件首次渲染时运行

  return (
    <div>
      {data && <p>Data: {data}</p>}
    </div>
  );
}

在上述例子中，当数据可用时，组件会重新渲染显示新数据。