React.lazy？ しかし、コンポーネントがない場合はどうでしょうか？

正直なところ、このコード分割はすでに少し疲れています。 私たちは皆、円を描いて歩きますが、これが主な問題です。



コード分​​割は、モジュールレベルでの分離として開始され、コンポーネントレベルでの分離として終了しました。



そして、ここでの問題は頭だけにあります-React.lazyは良いのですが、 インポートは 消え ていません...では、なぜコンポーネントだけでコードが分割されるのですか？



React.lazy、React-Loadable、Loadable-Components、Imported-component-世界には、コンポーネントのロードをわずかにユーザーフレンドリーなプロセスにして、準備ができていることを示すために、いくつかの砂糖でモジュールのロードをラップする多くのライブラリがあります。 非同期ローダーの最小コード。

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とReact.lazyは、州と連携するもう1つの方法です。 これ以上。

しかし、コンポーネントがない場合はどうでしょうか？

これに問題はないようです-import（ "someStuff"）。then（ 'go-on'） 。 しかし、ここでも、Reactライフサイクルに正しく配置する方法、何をすべきか、コンポーネントの死後に約束が解決したかどうかなどについての質問が始まります。 そして、頭の中のすべてが1つのコンポーネントです。



私はミニ調査を実施しました-NOBODYは、この最も古いバージョンのコード分割を使用しなくなりました。 彼は現代の状況でそれを食べる方法を知りません。 そして一般的に、すべてが悪いです。

解決策があり、再び4行で-renderProps

コード分​​割のオブジェクトがコンポーネントではなくモジュールであるという事実にもかかわらず、すべてが非常に単純です。コンポーネントは依然として操作の場所です。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同じパターンで、コードをロードし、このコードをrenderPropsとして「提供」する方向にのみ向いています。

すぐに使える：

• ロード可能コンポーネント（ 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（react-loadable -library ）
  
  
  
  

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

• react-imported-component（ react-imported-library ）
  
  
  
  

   //    react-loadable-library,   Suspense
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

安くてとても怒っています。 これにより、さらに20％削減できました。 しかし、最も重要なことは、必要なものと必要なときにだけロードするコード分割を非常に宣言的に設定できることです。



これであなたの動き、％username％。

そして、誰がフックでこれを書き換えますか？