React.lazy؟ ولكن ماذا لو لم يكن لديك مكون؟

تقسيم الرمز هذا ، بصراحة ، متعب بالفعل. كلنا نسير ونسير في دوائر ، وهذه هي المشكلة الرئيسية.

بدأ تقسيم الشفرة كفاصل على مستوى الوحدة النمطية ، وانتهى كفاصل على مستوى المكون.

والمشكلة هنا تكمن فقط في الرأس - React.lazy جيدة ، لكن الاستيراد لم يختف ... إذن لماذا يتم تقسيم الشفرة فقط حول المكونات؟

React.lazy ، React-Loadable ، مكونات قابلة للتحميل ، مكون مستورد - يوجد في العالم العديد من المكتبات التي تقوم بلف وحدة التحميل في بعض السكر ، فقط إلى عملية سهلة الاستخدام أكثر قليلاً عند تحميل المكون وإظهاره جاهزًا. الحد الأدنى لرمز اللودر غير المتزامن.

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"). ثم ("go-on") . ولكن هنا مرة أخرى تبدأ الأسئلة حول كيفية وضعها بشكل صحيح في دورة حياة React ، وما الذي يجب القيام به ، وما إذا كان الوعد قد تم حله بعد وفاة المكون ، وما إلى ذلك. وكل ما في الرأس مكون واحد.

لقد أجريت استطلاعًا مصغرًا - يستخدم 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> ) } 

• رد فعل lodable ( رد فعل تحميل مكتبة )
  
  

   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 ٪ إضافية. لكن الأهم من ذلك ، أنها سمحت بإعداد تقسيم الشفرة بشكل تعريفي ، والذي سيؤدي فقط إلى تحميل ما هو مطلوب ومتى كان ضروريًا.

الآن حركتك ،٪ اسم المستخدم٪.

ومن سيعيد كتابة هذا الخطافات؟