react 函数式组件，如何在页面加载前完成数据请求

在 React 函数式组件中，可以使用 `useEffect` Hook 来完成页面加载前的数据请求。在 `useEffect` 函数中，可以使用 `async/await` 或 `Promise` 来完成异步数据请求。

以下是一个示例：

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

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

  useEffect(() => {
    async function fetchData() {
      const result = await axios.get('https://jsonplaceholder.typicode.com/users');
      setData(result.data);
    }
    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

在上面的示例中，`useEffect` 中的 `async` 函数会在组件挂载后立即执行，从远程 API 获取数据并设置到组件的状态中。`useEffect` 的第二个参数是一个空数组，这表示只有当组件挂载时才会执行 `useEffect` 函数。这样可以确保数据只在页面加载前获取一次，而不是在每次组件更新时都获取一次。