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

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

基础概念

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

为什么会导致多次呈现？

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

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

如何解决这个问题？

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

1. 使用 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>;
  }
}

1. 使用 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>;
}

1. 使用状态管理库：如 Redux 或 MobX，这些库提供了更精细的状态管理，可以帮助你更好地控制何时以及如何获取和更新数据。

应用场景

• 当你需要在组件挂载后立即获取数据，并且不需要在每次 props 更新时都重新获取数据时。
• 当你需要根据外部数据源的变化来更新组件状态，但又不希望因为组件的其他渲染而导致重复的数据请求时。

总结

getDerivedStateFromProps 是一个强大的工具，但需要谨慎使用以避免不必要的性能开销。通常情况下，推荐使用 componentDidMount 或 useEffect 来处理组件挂载时的数据获取逻辑。