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'));

我的学生Dashboard.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>
);

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

// 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;
}

3. 在应用程序组件或包装导航屏幕的组件中使用包装器组件

// 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
...
}