React.suspense 如何“处理” i18next 后端加载？答案

【问题标题】：How does React.suspense "handle" i18next backend loading?React.suspense 如何“处理” i18next 后端加载？
【发布时间】：2021-11-03 01:09:12
【问题描述】：

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

我想了解的是，React.suspense 究竟如何能够“识别”这个异步调用，并在完成之前显示回退 UI。

Index.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 文档明确指出：

React.Suspense 允许你指定加载指示器，以防万一它下面的树中的组件尚未准备好呈现。今天，延迟加载组件是唯一支持的用例：

任何澄清将不胜感激。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

Suspense 的想法是当组件抛出 Promise（或在组件渲染期间调用的任何内容）时，React 会寻找最接近的 Suspense 以显示后备 UI。

在您的情况下，您的组件正在使用 useTranslate 挂钩。当namespaces 尚未加载时，它会抛出Promise 并加载namespaces。在渲染阶段，React 捕获抛出的 Promise 并在树上查找最近的 Suspense 组件以显示备用 UI。

这是来自钩子useTranslation的sn-p：

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

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

【讨论】：

谢谢。您认为在渲染路由之前需要将此技术用于其他异步操作是否“安全”？