使用getDerivedStateFromProps获取API数据会导致组件多次呈现。

getDerivedStateFromProps 是 React 类组件中的一个生命周期方法，它在组件实例化后以及每次重新渲染前都会被调用。这个方法的主要用途是根据新的 props 来更新组件的 state。然而，如果不正确地使用它，确实可能导致组件不必要的多次渲染。

基础概念

getDerivedStateFromProps 接收两个参数：nextProps 和 prevState，并返回一个对象来更新 state，或者返回 null 表示不更新 state。

为什么会导致多次呈现？

当组件挂载后，每次父组件的更新导致子组件重新渲染时，getDerivedStateFromProps 都会被调用。如果在 getDerivedStateFromProps 中发起 API 请求，并且基于请求结果更新 state，那么可能会出现以下情况：

组件首次渲染。
getDerivedStateFromProps 被调用，发起 API 请求。
API 请求返回前，组件可能因为其他原因（如父组件更新）再次渲染。
getDerivedStateFromProps 再次被调用，再次发起 API 请求。
这个过程可能会重复，导致多次不必要的渲染和 API 请求。

如何解决这个问题？

为了避免这种情况，可以采取以下策略：

使用 componentDidMount 发起 API 请求：这是最常见的做法，因为 componentDidMount 只在组件挂载后调用一次。

class MyComponent extends React.Component {
  state = {
    data: null,
  };

  componentDidMount() {
    fetch('api-url')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data ? this.state.data : 'Loading...'}</div>;
  }
}

使用 React 的 useEffect 钩子（如果是函数组件）：useEffect 允许你在组件挂载后执行副作用操作，并且可以通过返回一个清理函数来处理组件卸载时的逻辑。

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

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

  useEffect(() => {
    let isMounted = true;

    fetch('api-url')
      .then(response => response.json())
      .then(data => {
        if (isMounted) {
          setData(data);
        }
      });

    return () => {
      isMounted = false;
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return <div>{data ? data : 'Loading...'}</div>;
}