React.lazy? Tetapi bagaimana jika Anda tidak memiliki komponen?

Pemecahan kode ini, jujur, sudah sedikit lelah. Kita semua berjalan dan berjalan dalam lingkaran, dan ini adalah masalah utama.

Pemecahan kode dimulai sebagai pemisahan pada tingkat Modul, dan berakhir sebagai pemisahan pada tingkat Komponen.

Dan masalahnya di sini hanya di kepala - React.lazy baik, tetapi impor belum hilang ... Jadi mengapa kode hanya memisahkan tentang komponen?

React.lazy, React-Loadable, Loadable-Components, Impor-komponen - di dunia ada banyak perpustakaan yang membungkus modul memuat gula, hanya untuk sedikit lebih ramah pengguna proses pemuatan komponen dan menunjukkan siap. Kode minimum untuk async-loader.

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 dan React.lazy hanyalah cara lain untuk bekerja dengan negara. Tidak lebih.

Tetapi bagaimana jika Anda tidak memiliki komponen?

Tampaknya tidak ada masalah dengan ini - impor ("someStuff"). Lalu ('go-on') . Tetapi di sini sekali lagi pertanyaan dimulai tentang bagaimana menempatkannya dengan benar dalam siklus hidup Bereaksi, apa yang harus dilakukan, apakah janji telah diselesaikan setelah kematian komponen, dan seterusnya. Dan semua yang ada di kepala adalah satu komponen.

Saya melakukan survei mini - TIDAK ADA lagi yang menggunakan pemisahan kode versi tertua ini. Tidak tahu cara memakannya dalam kondisi modern. Dan secara umum, semuanya buruk.

Ada solusi, dan sekali lagi dalam 4 baris - renderProps

Semuanya sangat sederhana - terlepas dari kenyataan bahwa objek dari pemecahan kode bukanlah Komponen tetapi Modul - Komponen masih akan menjadi tempat operasi.

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

Pola yang sama, hanya berbalik ke arah memuat kode dan "menyediakan" kode ini sebagai renderProps.

Berfungsi di luar kotak:

• loadable-components ( 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> 

• komponen -reaksi-impor (perpustakaan-reaksi-impor )
  
  

   //    react-loadable-library,   Suspense 

Murah dan sangat marah. Ini memungkinkan saya untuk memotong 20% ​​tambahan. Tetapi, yang paling penting, itu memungkinkan deklaratif sangat mengatur pemecah kode, yang akan memuat hanya apa yang dibutuhkan dan ketika diperlukan.

Sekarang langkah Anda,% nama pengguna%.

Dan siapa yang akan menulis ulang ini di kait?