React.lazy? Mas e se você não tiver um componente?

Essa divisão de código, honestamente, já está um pouco cansada. Todos nós andamos e andamos em círculos, e este é o principal problema.

A divisão de código começou como uma separação no nível do módulo e terminou como uma separação no nível do componente.

E o problema aqui está exclusivamente na cabeça - o React.lazy é bom, mas a importação não desapareceu ... Então, por que o código é dividido apenas sobre os componentes?

React.lazy, React-Loadable, Loadable-Components, Imported-component - no mundo existem muitas bibliotecas que envolvem o carregamento do módulo com um pouco de açúcar, apenas para processar um pouco mais fácil o carregamento do componente e mostrá-lo pronto. O código mínimo para o carregador assí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 e React.lazy são apenas outra maneira de trabalhar com o estado. Nada mais.

Mas e se você não tiver um componente?

Parece não haver nenhum problema com isso - import ("someStuff"). Então ('continuar') . Mas aqui novamente começam as perguntas sobre como colocá-lo corretamente no ciclo de vida do React, o que fazer, se a promessa foi resolvida após a morte do componente e assim por diante. E tudo na cabeça é um componente.

Realizei uma mini pesquisa - NINGUÉM usa mais esta versão mais antiga da divisão de código. Não sabe como comê-lo em condições modernas. E, em geral, tudo está ruim.

Existe uma solução, e novamente em 4 linhas - renderProps

Tudo é muito simples - apesar do objeto de divisão de código não ser o Componente, mas o Módulo - o Componente ainda será o local da operação.

 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 />) } } 

O mesmo padrão, apenas virou na direção de carregar o código e "fornecê-lo" como renderProps.

Funciona imediatamente:

• componentes carregáveis ( 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> ) } 

• react-lodable (biblioteca de react-loadable)
  
  

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

• reagir-importado-componente ( reagir-importado-biblioteca )
  
  

   //    react-loadable-library,   Suspense 

Barato e com muita raiva. Isso me permitiu cortar outros 20%. Mas, mais importante ainda, permitiu configurar de maneira muito declarativa a divisão de código, que carregará apenas o necessário e quando necessário.

Agora sua jogada,% nome de usuário%.

E quem reescreverá isso em ganchos?