React.sussupense 如何"handle" i18next 后端加载？

Question

我正在使用一些非常标准的create-react-app样板，它使用延迟加载和react-i18next作为翻译库。这个库使用i18next-http-backend从远程API获取翻译文件。

我想了解的是，到底是如何反应。悬疑是能够"认出"的。此异步调用，并显示回退UI，直到它完成。

索引。ts文件:

import "./i18n";//Notice this
const container = document.getElementById("root");
ReactDOM.render(
<StylesProvider jss={jss}>
<ThemeProvider theme={theme}>
<React.StrictMode>
<BrowserRouter>
<Router />
</BrowserRouter>
</React.StrictMode>
</ThemeProvider>
</StylesProvider>,
container
);

i18n文件:

i18n
.use(Backend)
.init({
backend:{
loadPath: 'https://someRemoteApi/dictionary',          
})

路由器:

const Home = lazy(() => import("../../modules/home/Home"));
const Router: React.FC = (props) => {
return (
<>
<ErrorBoundary>
<Suspense fallback={<div className={styles.loader}><Loader /></div>}>
<Switch>
<ProtectedRoute exact component={Home} path="/"/>   
...more routes           
</Suspense>
</ErrorBoundary>
</>
);
};

通过这种设置，令我惊讶的是，回退呈现在屏幕上，直到这个后端插件完成它的工作。我正试图理解它的机制，以及这是否可以用于其他异步操作.

React文档明确声明:

反应。在某些情况下，悬念允许您指定加载指示器下面树中的组件还没有准备好渲染。今天,的唯一支持的用例是延迟加载组件& lt; React.Suspense>

如能澄清，不胜感激。

Answer 1

Suspense的想法是当组件抛出Promise(或在组件渲染期间调用的任何东西)时，React寻找最接近的Suspense以显示回退UI。

在您的例子中，您的组件正在使用useTranslate钩子。当namespaces还没有加载时，它抛出一个Promise并加载namespaces。在渲染阶段，React捕获抛出的Promise，并在树中寻找最接近的Suspense组件，以便显示回退UI。

这是钩子useTranslation的一个片段:

// not yet loaded namespaces -> load them -> and trigger suspense
throw new Promise((resolve) => {
loadNamespaces(i18n, namespaces, () => {
resolve();
});
});

你可以从这里查看钩子useTranslation是如何工作的