React.lazy? लेकिन अगर आपके पास कोई घटक नहीं है तो क्या होगा?

ईमानदारी से विभाजित यह कोड पहले से ही थोड़ा थक गया है। हम सभी मंडलियों में चलते हैं और चलते हैं, और यह मुख्य समस्या है।

कोड विभाजन मॉड्यूल स्तर पर पृथक्करण के रूप में शुरू हुआ, और घटक स्तर पर पृथक्करण के रूप में समाप्त हुआ।

और यहाँ समस्या विशेष रूप से सिर में है - React.lazy अच्छा है, लेकिन आयात दूर नहीं गया है ... तो कोड केवल घटकों के बारे में क्यों बंट रहा है?

React.lazy, React-Loadable, Loadable-Components, Imported-Components - दुनिया में कई पुस्तकालय हैं जो कुछ चीनी में मॉड्यूल लोडिंग को लपेटते हैं, पूरी तरह से उपयोगकर्ता के अनुकूल प्रक्रिया को थोड़ा और लोड करने के लिए तैयार करते हैं। 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 />) } } 

सस्पेंस और React.lazy राज्य के साथ काम करने का एक और तरीका है। और कुछ नहीं।

लेकिन अगर आपके पास कोई घटक न हो तो क्या होगा?

ऐसा लगता है कि इसके साथ कोई समस्या नहीं है - आयात ("someStuff")। फिर ('गो-ऑन') । लेकिन यहां फिर से सवाल शुरू होते हैं कि इसे रिएक्ट जीवन चक्र में सही तरीके से कैसे रखा जाए, क्या करना है, क्या वादा घटक की मृत्यु के बाद हल हो गया है, और इसी तरह। और सिर में सभी एक घटक हैं।

मैंने एक मिनी सर्वेक्षण किया - NOBODY कोड विभाजन के इस सबसे पुराने संस्करण का उपयोग करता है। आधुनिक परिस्थितियों में इसे नहीं खाना चाहिए। और सामान्य तौर पर, सब कुछ खराब है।

एक समाधान है, और फिर से 4 लाइनों में - रेंडरप्रॉप्स

सब कुछ बहुत सरल है - इस तथ्य के बावजूद कि कोड विभाजन की वस्तु घटक नहीं है, लेकिन मॉड्यूल - घटक अभी भी ऑपरेशन का स्थान होगा।

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

एक ही पैटर्न, केवल कोड लोड करने और रेंडरप्रॉप्स के रूप में इस कोड को "प्रदान" करने की दिशा में बदल गया।

बॉक्स से बाहर काम करता है:

• लोड करने योग्य-घटक ( 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> ) } 

• प्रतिक्रिया-दर्ज करने योग्य ( प्रतिक्रिया-लोड करने योग्य-पुस्तकालय )
  
  

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

• प्रतिक्रिया-आयातित-घटक ( प्रतिक्रिया-आयातित-पुस्तकालय )
  
  

   //    react-loadable-library,   Suspense 

सस्ता और बहुत गुस्से वाला। इसने मुझे 20% अतिरिक्त कटौती करने की अनुमति दी। लेकिन, सबसे महत्वपूर्ण बात यह है कि इसने कोड-विभाजन की बहुत ही औपचारिक रूप से स्थापना की अनुमति दी, जो केवल वही होगा जो आवश्यक है और जब आवश्यक हो।

अब आपका कदम,% उपयोगकर्ता नाम%।

और इसे हुक पर कौन लिखेगा?