La división del código en una aplicación de reacción

La forma más obvia de implementar la división del código es importar dinámicamente a nivel de componente. Sin embargo, esto no significa que todos y cada uno de los componentes deban ser importados dinámicamente. Más bien, los que utilizan un paquete grande (no utilizado en ningún otro lugar) serían un buen candidato. También cuando se utiliza el enrutamiento, es una buena idea importar dinámicamente cada página, excepto la página de inicio.

Para importar dinámicamente un componente, se puede utilizar una variación del patrón de componentes de orden superior. Un componente de orden superior acepta un componente como parámetro y devuelve un componente. En este caso, aceptará una promesa que se resuelve a un componente y devuelve un componente. Este componente de orden superior puede definir una variable de estado para contener el componente devuelto que se inicializa a nulo de esta manera:

1this.state={Componente:null};

javascript

Luego, dentro del constructor de componentes de orden superior se puede ejecutar la promesa que se ha pasado como argumento y, cuando se resuelva, se puede actualizar el estado con el componente resultante:

1componentImport().then(loaded====este.setState({Component: loaded.default}));

javascript

Todo lo que queda por hacer en el componente de orden superior es implementar el método del ciclo de vida de render. Dentro de este método podemos probar el estado por nulo para comprobar si el componente ha sido cargado. Si no lo ha hecho, podemos devolver nulo o algo para informar al usuario que la aplicación está esperando. Si se ha cargado, podemos hacer que el componente pase a la utilería. El componente final de orden superior se verá así:

12345678910111213141516171819funciónComponenteDinámico(componenteImportación){retornoclassextendeComponenteReactivo{constructor(puntal){super(puntal);este.estado={Componente:nulo};componenteImportación().entonces(cargado===esto. setState({Componente: loaded.default}));}render(){if(this.state.Componente===null){retorno<div>Cargando componente, por favor espere</div>;}retorno<este.state.Componente{...este.props}/{;;}};}

jsx

Consumimos este componente de orden superior usando la función import() como parámetro y luego renderizamos el componente resultante de esta manera:

12constComponente de importación dinámica=Componente de importación dinámica(()=("./ShowUtc"));return<Componente de importación dinámica/

jsx