React 应用因 API 响应过大而变慢：如何提高性能？

Question

我正在开发一个 React 应用程序，我使用 Amadeus API 获取航班报价。我的表单允许用户输入航班详细信息（出发日期、出发日期、返回日期），提交后，我会获取航班优惠并显示它们。

问题是，在获取返回大量响应的 API 数据后，我的应用程序变得缓慢。与 UI 交互时，表单输入、按钮和 onChange 处理程序会遇到明显的延迟。

这是我的代码的简化版本：

我成功获取数据，但大量数据导致应用程序的其余部分（包括表单处理）缓慢且无响应。

const [formData1, setFormData1] = useState({
    from_inp: '',
    to_inp: '',
    depart_inp: '',
    return_inp: '',
});

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const fromIATA = formData1.from_inp.split('(')[1].replace(')', '');
    const toIATA = formData1.to_inp.split('(')[1].replace(')', '');

    const params = {
      originLocationCode: fromIATA,
      destinationLocationCode: toIATA,
      departureDate: formData1.depart_inp,
      adults: 1,
      children: 1,
    };

    if (formData1.return_inp) {
      params.returnDate = formData1.return_inp;
    }

    // Fetch access token
    const tokenResponse = await axios.post('https://test.api.amadeus.com/v1/security/oauth2/token', {
      grant_type: 'client_credentials',
      client_id: 'YOUR_CLIENT_ID',
      client_secret: 'YOUR_CLIENT_SECRET',
    });

    const accessToken = tokenResponse.data.access_token;

    // Fetch flight offers
    const response = await axios.get('https://test.api.amadeus.com/v2/shopping/flight-offers', {
      params: params,
      headers: {
        'Authorization': `Bearer ${accessToken}`,
      },
    });

    const apiResponse = response.data;
    console.log('API Response:', apiResponse);

    // Handle flight details
    if (Array.isArray(apiResponse.data)) {
      setFlightDetails(apiResponse.data);
    } else {
      setError('No flight details match your search.');
      setFlightDetails([]);
    }

  } catch (error) {
    console.error('Error fetching flight offers:', error);
    setError(`Error fetching flight details: ${error.message}`);
    setFlightDetails([]);
  }
};

我尝试过的：

我使用 useState 来处理表单输入。

我考虑过消除 onChange 处理程序的抖动，但它还没有完全解决问题。

我正在考虑限制 API 结果，但我希望应用程序即使在获取大量数据时也能保持响应。

我的问题：

如何优化我的应用程序，以便在处理大型 API 响应时表单提交和按钮单击不会出现滞后？

我应该对 API 数据进行分页，还是有更有效的方法来处理大型响应？

我可以应用任何特定于 React 的技术来提高 UI 性能吗？

任何有关如何解决性能问题的建议将不胜感激！

Answer 1

我认为您应该应用分页，或者也可以应用延迟加载来提高性能、降低内存使用量和减少资源消耗。 在处理大型 API 响应时，延迟加载组件特别有用。