Estoy trabajando con un modelo bastante estándar de crear-reaccionar-aplicación, que utiliza carga diferida y reacciona-i18next como biblioteca de traducción. Esta biblioteca usa i18next-http-backend para obtener los archivos de traducción de una API remota.
Lo que estoy tratando de entender es cómo exactamente React.suspense puede "reconocer" esta llamada asincrónica y mostrar la interfaz de usuario alternativa hasta que esté lista.
Archivo 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 );archivo i18n:
i18n .use(Backend) .init({ backend:{ loadPath: 'https://someRemoteApi/dictionary', })Enrutador:
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> </> ); };Con esta configuración, para mi asombro, el respaldo se representa en la pantalla , hasta que este complemento de back-end termina su trabajo. Estoy tratando de comprender su mecánica y si esto se puede aprovechar para otras operaciones asíncronas .
los documentos de React establecen claramente:
React.Suspense le permite especificar el indicador de carga en caso de que algunos componentes en el árbol debajo de él aún no estén listos para renderizarse. Hoy en día, los componentes de carga diferida son el único caso de uso compatible con <React.Suspense>:
Cualquier aclaración será muy apreciada.
La idea de Suspense es que cuando un componente lanza una Promise (o cualquier cosa que se llame durante el renderizado del componente), React busca el Suspense más cercano para mostrar la interfaz de usuario alternativa.
En su caso, sus componentes están usando el useTranslate . Cuando los espacios de namespaces aún no están cargados, lanza una Promise y carga los espacios de namespaces . Durante la fase de renderizado, React captura la Promise lanzada y busca el componente de Suspense más cercano en el árbol para mostrar la IU de reserva.
Este es un fragmento del gancho useTranslation :
// not yet loaded namespaces -> load them -> and trigger suspense throw new Promise((resolve) => { loadNamespaces(i18n, namespaces, () => { resolve(); }); }); Puedes comprobar cómo funciona el gancho useTranslation desde aquí