Reaccionar perezoso? Pero, ¿y si no tienes un componente?

Este código de división, honestamente, ya está un poco cansado. Todos caminamos y caminamos en círculos, y este es el principal problema.

La división de código comenzó como separación en el nivel de Módulo y terminó como separación en el nivel de Componente.

Y el problema aquí está exclusivamente en la cabeza: React.lazy es bueno, pero la importación no ha desaparecido ... Entonces, ¿por qué el código se divide solo sobre los componentes?

React.lazy, React-Loadable, Loadable-Components, Imported-component: en el mundo hay muchas bibliotecas que envuelven la carga del módulo en algo de azúcar, solo para procesar un poco más fácil de usar y cargarlo. El código mínimo para el cargador asíncrono.

const loadable = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ ResultComponent: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, ResultComponent } = this.state; // Display loaded component return ResultComponent ? <ResultComponent {...this.props}/> : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

Suspense y React.lazy son solo otra forma de trabajar con el estado. Nada mas.

Pero, ¿y si no tienes un componente?

Parece que no hay problema con esto: importar ("someStuff"). Luego ('continuar') . Pero aquí nuevamente comienzan las preguntas sobre cómo colocarlo correctamente en el ciclo de vida de React, qué hacer, si la promesa se resolvió después de la muerte del componente, y así sucesivamente. Y todos en la cabeza son un componente.

Realicé una mini encuesta: NADIE usa esta versión más antigua de división de código. No sabe cómo comerlo en condiciones modernas. Y en general, todo es malo.

Hay una solución, y nuevamente en 4 líneas - renderProps

Todo es muy simple, a pesar de que el objeto de la división del código no es el Componente sino el Módulo, el Componente seguirá siendo el lugar de la operación.

 const loadableModule = (loaderFunction) => class AsyncComponent extends React.Component { state = { ResultComponent: null, error: false, }; componentWillMount() { loaderFunction .then(result => this.setState({ module: result.default || result})) // "es6" default export .catch(() => this.setState({ error: true }); } render() { const { error, module } = this.state; return module // pass it as a render prop! ? this.props.children(module) // pass it as a render prop! : (error ? <ErrorComponent /> : <LoadingComponent />) } } 

El mismo patrón, solo giró en la dirección de cargar el código y "proporcionar" este código como renderProps.

Funciona fuera de la caja:

• componentes cargables ( loadable.lib )
  
  

   import loadable from '@loadable/component' const Moment = loadable.lib(() => import('moment')) function FromNow({ date }) { return ( <div> <Moment fallback={date.toLocaleDateString()}> {({ default: moment }) => moment(date).fromNow()} </Moment> </div> ) } 

• reaccionar-lodable ( react-loadable-library )
  
  

   import {importedLibraryDefault} from 'react-loadable-library'; const Moment = importedLibraryDefault( () => import('momentjs')); <Moment> { (momentjs) => <span> {momentjs(date).format(FORMAT)}</span> } </Moment> 

• reaccionar-importado-componente ( reaccionar-importado-biblioteca )
  
  

   //    react-loadable-library,   Suspense 

Barato y muy enojado. Esto me permitió reducir un 20% adicional. Pero, lo más importante, permitió configurar de manera declarativa la división de código, que cargará solo lo que se necesita y cuando es necesario.

Ahora tu movimiento,% username%.

¿Y quién reescribirá esto en ganchos?