React 中的代码拆分导致 API 调用被执行多次

Question

我正在使用 React 构建一个 Web 应用程序。我已经将 React Lazy 与 Webpack 一起用于代码拆分，但我遇到了一个问题。如果我在页面 A 并访问另一个屏幕 (B)，现在我重新访问最后一个屏幕 (A)，屏幕将再次加载，并且组件 (A) 的 useEffect 挂钩中的 API 调用将再次执行。

我的应用没有会不断变化的数据，所以我不想一次又一次地调用它。我得出的结论是，当用户访问另一个屏幕时，React 会卸载前一个组件，而当用户再次访问时，它会安装该组件并执行 useEffect 钩子。

因此，我想避免不必要的 API 调用。我知道我可以缓存我的 API 调用，但这感觉像是一种解决方法。是否有更好的 API 缓存替代方案，或者我在代码中犯了一些错误？

我实现代码拆分的app.js文件：

const LoginContainer = lazy(()=> import('./Container/StudentDashboard.container'));

我的 StudentDashboard.container.js 文件：

const StudentDashboard = ()=>{
  useEffect(()=>{
    (async()=>{
      const data = await fetch({...}) # this API call is executed every time user visits the screen
     })
  },[])
}

Answer 1

您可以创建一个包装器组件，在其中获取一次数据。然后将此数据存储在ReactContext 中并在屏幕组件中使用上下文。

解决办法如下：

1. 为存储数据创建上下文

// DataProvider.js
const DataContext = React.createContext(null);

const useData = () => React.useContext(DataContext); // create custom hook to use data on different screens

const DataProvider = ({ children }) => (
  <DataContext.Provider value={React.useState(null)}>
    {children}
  </DataContext.Provider>
);

1. 创建包装器组件以在上下文中获取和存储数据

// DataResolver.js
function DataResolver({children}) {
  const [storedData, setStoredData] = useData(); // custom hook created in DataProvider.js

  useEffect(() => {
    const fetchAndStoreData = async () => {
      const data = await fetch({...});
      setStoredData(data);
    };

    if (!storedData) { // OR any your custom condition
      fetchAndStoreData();
    }
  },[]);

  return children;
}

1. 在您的应用组件或包装您的导航屏幕的组件中使用包装器组件

// App.js
function App() {
  return (
    <DataProvider>
      <DataResolver>
        {/* Your views or routing logic */}
        <View>...</View>
      </DataResolver>
    </DataProvider>
  );
}

4. 最后在屏幕组件中使用上下文

// StudentDashboard.js
const StudentDashboard = ()=>{
  const [data] = useData(); // using custom hook you created in DataProvider.js
  ...
}