मुझे एक समस्या है। आवेदन एंगुलर, और रिएक्ट में घटक पुस्तकालय में लिखा गया है। एक पुस्तकालय बहुत महंगा है। तो, आपको कम लागत के साथ एक कोणीय अनुप्रयोग में प्रतिक्रिया घटकों का उपयोग करने की आवश्यकता है। हम यह पता लगाते हैं कि यह कैसे करना है।

त्याग

मैं कोणीय में बिल्कुल भी विशेषज्ञ नहीं हूं। मैंने 2017 में पहले संस्करण की कोशिश की, फिर एंगुलरडार्ट में थोड़ा सा देखा, और अब मुझे फ्रेमवर्क के आधुनिक संस्करण पर एप्लिकेशन समर्थन का सामना करना पड़ा है। यदि यह आपको लगता है कि निर्णय अजीब हैं या "दूसरी दुनिया से" हैं, तो यह आपको प्रतीत नहीं होता है।

लेख में प्रस्तुत समाधान का अभी तक वास्तविक परियोजनाओं में परीक्षण नहीं किया गया है और यह केवल एक अवधारणा है। अपने जोखिम पर इसका उपयोग करें।

समस्या

मैं वर्तमान में Angular 8. Plus पर काफी बड़े एप्लिकेशन का समर्थन करता हूं और विकसित करता हूं, एक दर्जन से अधिक (React पर भी) बनाने की योजना पर कुछ छोटे अनुप्रयोग हैं। सभी एप्लिकेशन का उपयोग कंपनी की आंतरिक आवश्यकताओं के लिए किया जाता है और एक ही शैली में होना चाहिए। एकमात्र तार्किक तरीका एक घटक पुस्तकालय बनाना है जिसके आधार पर आप जल्दी से किसी भी एप्लिकेशन का निर्माण कर सकते हैं।

लेकिन वर्तमान स्थिति में, आप केवल प्रतिक्रिया पर एक पुस्तकालय नहीं लिख सकते हैं और लिख सकते हैं। आप इसका उपयोग सबसे बड़े अनुप्रयोग में नहीं कर सकते - यह कोणीय में लिखा गया है। मैं इस समस्या का सामना करने वाला पहला व्यक्ति नहीं हूं। Google पर "कोणीय में प्रतिक्रिया" के लिए होने वाली पहली चीज़ माइक्रोसॉफ्ट रिपॉजिटरी है । दुर्भाग्य से, इस समाधान का कोई प्रलेखन नहीं है। इसके अलावा, परियोजना की रीडमी में यह स्पष्ट रूप से कहा गया है कि पैकेज का उपयोग Microsoft द्वारा आंतरिक रूप से किया जाता है, टीम के पास इसके विकास के लिए कोई स्पष्ट योजना नहीं है और इसका उपयोग करना आपके जोखिम पर ही है। मैं ऐसे अस्पष्ट पैकेज को उत्पादन में खींचने के लिए तैयार नहीं हूं, इसलिए मैंने अपनी बाइक लिखने का फैसला किया।

आधिकारिक साइट @ कोणीय-प्रतिक्रिया / कोर

निर्णय

प्रतिक्रिया एक पुस्तकालय है जिसे एक विशिष्ट समस्या को हल करने के लिए डिज़ाइन किया गया है - एक दस्तावेज़ के DOM पेड़ का प्रबंधन। हम किसी भी प्रतिक्रियाशील तत्व को मनमाने ढंग से DOM नोड में डाल सकते हैं।

const Hello = () => <p>Hello, React!</p>; render(<Hello />, document.getElementById('#hello')); 

इसके अलावा, render फ़ंक्शन को बार-बार कॉल करने पर कोई प्रतिबंध नहीं है। यही है, डोम में प्रत्येक घटक को अलग से प्रस्तुत करना संभव है। और यह वही है जो एकीकरण में पहला कदम उठाने में मदद करेगा।

ट्रेनिंग

सबसे पहले, यह समझना महत्वपूर्ण है कि डिफ़ॉल्ट रूप से रिएक्ट को विधानसभा के दौरान किसी विशेष स्थिति की आवश्यकता नहीं है। यदि आप createElement उपयोग नहीं करते हैं, लेकिन createElement को कॉलिंग createElement लिए सीमित createElement , तो आपको कोई भी कदम नहीं उठाना पड़ेगा, सब कुछ बस बॉक्स से बाहर हो जाएगा।

लेकिन, निश्चित रूप से, हम JSX का उपयोग करने के लिए उपयोग किए जाते हैं और इसे खोना नहीं चाहते हैं। सौभाग्य से, कोणीय डिफ़ॉल्ट रूप से टाइपस्क्रिप्ट का उपयोग करता है, जो जेएसएक्स को फ़ंक्शन कॉल में बदल सकता है। आपको बस संकलक ध्वज जोड़ने की आवश्यकता है --jsx=react या tsconfig.json में compilerOptions अनुभाग में पंक्ति "jsx": "react" जोड़ें "jsx": "react" ।

एकता प्रदर्शित करें

आरंभ करने के लिए, हमें यह सुनिश्चित करने की आवश्यकता है कि प्रतिक्रिया घटकों को कोणीय अनुप्रयोग के अंदर प्रदर्शित किया जाए। यही है, ताकि लाइब्रेरी वर्क के परिणामस्वरूप DOM तत्व तत्व ट्री में सही स्थानों को उठाएं।

हर बार जब आप रिएक्ट घटक का उपयोग करते हैं, तो render फ़ंक्शन को सही ढंग से कॉल करने के बारे में सोचना बहुत मुश्किल होता है। साथ ही, भविष्य में हमें डेटा स्तर और ईवेंट हैंडलर पर घटकों को एकीकृत करने की आवश्यकता होगी। इस मामले में, यह एक कोणीय घटक बनाने के लिए समझ में आता है जो रिएक्ट तत्व को बनाने और नियंत्रित करने के पूरे तर्क को संलग्न करेगा।

 // Hello.tsx export const Hello = () => <p>Hello, React!</p>; // hello.component.ts import { createElement } from 'react'; import { render } from 'react-dom'; import { Hello } from './Hello'; @Component({ selector: 'app-hello', template: `<div #react></div>`, }) export class HelloComponent implements OnInit { @ViewChild('react', { read: ElementRef, static: true }) ref: ElementRef; ngOnInit() { this.renderReactElement(); } private renderReactElement() { const props = {}; const reactElement = createElement(Hello, props); render(reactElement, this.ref.nativeElement); } } 

कोणीय घटक का कोड बेहद सरल है। यह खुद को केवल एक खाली कंटेनर प्रदान करता है और इसके लिए एक लिंक प्राप्त करता है। इस मामले में, आरंभीकरण के समय, प्रतिक्रिया तत्व का रेंडर कहा जाता है। यह createElement फ़ंक्शन का उपयोग करके बनाया गया है और render फ़ंक्शन को दिया गया है, जो इसे Angular से बनाए गए DOM नोड में रखता है। आप इस तरह के एक घटक का उपयोग कर सकते हैं जैसे कोई अन्य अंगुल घटक, कोई विशेष स्थिति नहीं।

इनपुट एकीकरण

आमतौर पर, इंटरफ़ेस तत्वों को प्रदर्शित करते समय, आपको उन्हें डेटा स्थानांतरित करने की आवश्यकता होती है। यहां सब कुछ भी काफी createElement - जब createElement कॉल किया createElement तो आप किसी भी डेटा को createElement से घटक को पास कर सकते हैं।

 // Hello.tsx export const Hello = ({ name }) => <p>Hello, {name}!</p>; // hello.component.ts import { createElement } from 'react'; import { render } from 'react-dom'; import { Hello } from './Hello'; @Component({ selector: 'app-hello', template: `<div #react></div>`, }) export class HelloComponent implements OnInit { @ViewChild('react', { read: ElementRef, static: true }) ref: ElementRef; @Input() name: string; ngOnInit() { this.renderReactElement(); } private renderReactElement() { const props = { name: this.name, }; const reactElement = createElement(Hello, props); render(reactElement, this.ref.nativeElement); } } 

अब आप name स्ट्रिंग को कोणीय घटक में पारित कर सकते हैं, यह रिएक्ट घटक में गिर जाएगा और प्रदान किया जाएगा। लेकिन अगर कुछ बाहरी कारणों से लाइन बदल जाती है, तो रिएक्ट को इसके बारे में पता नहीं चलेगा और हमें एक पुराना डिस्प्ले मिलेगा। कोणीय में एक ngOnChanges जीवन चक्र ngOnChanges है जो आपको घटक मापदंडों और उस पर प्रतिक्रियाओं में परिवर्तन को ट्रैक करने की अनुमति देता है। हम OnChanges इंटरफ़ेस लागू करते हैं और एक विधि जोड़ते हैं:

 // ... ngOnChanges(_: SimpleChanges) { this.renderReactElement(); } // ... 

यह नए प्रॉप्स से बनाए गए तत्व के साथ render फ़ंक्शन को फिर से कॉल करने के लिए पर्याप्त है, और पुस्तकालय खुद यह पता लगाएगा कि पेड़ के किन हिस्सों को प्रदान किया जाना चाहिए। घटक के अंदर स्थानीय स्थिति को भी संरक्षित किया जाएगा।

इन जोड़तोड़ के बाद, कोणीय-घटक को सामान्य तरीके से इस्तेमाल किया जा सकता है और इसे डेटा पास किया जा सकता है।

 <app-hello name="Angular"></app-hello> <app-hello [name]="name"></app-hello> 

अद्यतन घटकों के साथ बेहतर काम के लिए, आप परिवर्तन का पता लगाने की रणनीति की ओर देख सकते हैं। मैं इस पर विस्तार से विचार नहीं करूंगा।

आउटपुट एकीकरण

एक और समस्या बनी हुई है - प्रतिक्रिया-घटकों के अंदर की घटनाओं के लिए आवेदन की प्रतिक्रिया। चलो @Output डेकोरेटर का @Output और कॉलबैक को @Output माध्यम से पास करें।

 // Hello.tsx export const Hello = ({ name, onClick }) => ( <div> <p>Hello, {name}!</p> <button onClick={onClick}>Say "hello"</button> </div> ); // hello.component.ts import { createElement } from 'react'; import { render } from 'react-dom'; import { Hello } from './Hello'; @Component({ selector: 'app-hello', template: `<div #react></div>`, }) export class HelloComponent implements OnInit { @ViewChild('react', { read: ElementRef, static: true }) ref: ElementRef; @Input() name: string; @Output() click = new EventEmitter<string>(); ngOnInit() { this.renderReactElement(); } private renderReactElement() { const props = { name: this.name, onClick: () => this.lick.emit(`Hello, ${this.name}!`), }; const reactElement = createElement(Hello, props); render(reactElement, this.ref.nativeElement); } } 

हो गया। घटक का उपयोग करते समय, आप ईवेंट हैंडलर पंजीकृत कर सकते हैं और उनका जवाब दे सकते हैं।

  <app-hello [name]="name" (click)="sayHello($event)"></app-hello> 

परिणाम एक कोणीय अनुप्रयोग के अंदर उपयोग के लिए प्रतिक्रिया घटक के लिए एक पूरी तरह कार्यात्मक आवरण है। यह डेटा संचारित कर सकता है और उसके भीतर की घटनाओं पर प्रतिक्रिया कर सकता है।

एक बात और ...

मेरे लिए, कोणीय में सबसे सुविधाजनक चीज टू-वे डेटा बाइंडिंग, ngModel । यह सुविधाजनक, सरल है, बहुत कम मात्रा में कोड की आवश्यकता होती है। लेकिन वर्तमान कार्यान्वयन में, एकीकरण संभव नहीं है। यह तय किया जा सकता है। ईमानदार होने के लिए, मुझे वास्तव में समझ में नहीं आता है कि यह तंत्र आंतरिक डिवाइस के दृष्टिकोण से कैसे काम करता है। इसलिए, मैं स्वीकार करता हूं कि मेरा समाधान सुपर-सबोप्टीमल है और मुझे खुशी होगी अगर आप टिप्पणियों में ngModel का समर्थन करने के लिए और अधिक सुंदर तरीके से ngModel ।

सबसे पहले, आपको ControlValueAccessor इंटरफ़ेस ( @angular/forms पैकेज से) को लागू करने और घटक में एक नया प्रदाता जोड़ने की आवश्यकता है।

 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; const REACT_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => HelloComponent), multi: true }; @Component({ selector: 'app-hello', template: `<div #react></div>`, providers: [PREACT_VALUE_ACCESSOR], }) export class PreactComponent implements OnInit, OnChanges, ControlValueAccessor { // ... } 

इस इंटरफ़ेस के लिए writeValue , writeValue , registerOnChange , registerOnTouched विधियों के कार्यान्वयन की आवश्यकता है। सभी दस्तावेज में अच्छी तरह से वर्णित हैं। हमें उनका एहसास है।

 //    const noop = () => {}; @Component({ selector: 'app-hello', template: `<div #react></div>`, providers: [PREACT_VALUE_ACCESSOR], }) export class PreactComponent implements OnInit, OnChanges, ControlValueAccessor { // ... private innerValue: string; //      ngModel private onTouchedCallback: Callback = noop; private onChangeCallback: Callback = noop; //       //       get value(): string { return this.innerValue; } set value(v: string) { if (v !== this.innerValue) { this.innerValue = v; //    ,   this.onChangeCallback(v); } } writeValue(value: string) { if (value !== this.innerValue) { this.innerValue = value; //        this.renderReactElement(); } } //   registerOnChange(fn: Callback) { this.onChangeCallback = fn; } registerOnTouched(fn: Callback) { this.onTouchedCallback = fn; } //    onBlur() { this.onTouchedCallback(); } } 

उसके बाद, आपको यह सुनिश्चित करने की आवश्यकता है कि यह सब रिएक्ट घटक को पारित किया गया है। दुर्भाग्य से, रिएक्ट टू-वे डेटा बाइंडिंग के साथ काम करने में सक्षम नहीं है, इसलिए हम इसे बदलने के लिए एक मूल्य और कॉलबैक देंगे। renderReactElement मेथड को renderReactElement ।

 // ... private renderReactElement() { const props = { name: this.name, onClick: () => this.lick.emit(`Hello, ${this.name}!`), model: { value: this.value, onChange: v => { this.value = v; } }, }; const reactElement = createElement(Hello, props); render(reactElement, this.ref.nativeElement); } // ... 

और रिएक्ट घटक में, हम इस मूल्य और कॉलबैक का उपयोग करेंगे।

 export const Hello = ({ name, onClick, model }) => ( <div> <p>Hello, {name}!</p> <button onClick={onClick}>Say "hello"</button> <input value={model.value} onChange={e => model.onChange(e.target.value)} /> </div> ); 

अब, हमने वास्तव में एंगुलर में रिएक्ट को एकीकृत किया है। आप परिणामस्वरूप घटक का उपयोग कर सकते हैं जैसा आप चाहते हैं।

 <app-hello [name]="name" (click)="sayHello($event)" [(ngModel)]="name" ></app-hello> 

परिणाम

प्रतिक्रिया एक बहुत ही सरल पुस्तकालय है जो किसी भी चीज़ के साथ एकीकृत करना आसान है। दिखाए गए दृष्टिकोण का उपयोग करके, आप न केवल निरंतर आधार पर कोणीय-अनुप्रयोगों के अंदर किसी भी रिएक्ट-घटकों का उपयोग कर सकते हैं, बल्कि धीरे-धीरे पूरे आवेदन को भी स्थानांतरित कर सकते हैं।

इस लेख में, मैंने स्टाइल मुद्दों पर बिल्कुल भी नहीं छुआ। यदि आप क्लासिक सीएसएस-इन-जेएस समाधान (स्टाइल-कंपोनेंट्स, इमोशन, जेएसएस) का उपयोग करते हैं, तो आपको कोई अतिरिक्त कार्रवाई नहीं करनी होगी। लेकिन अगर परियोजना को अधिक उत्पादक समाधान (एस्ट्रोफर्फ़, लिनारिया, सीएसएस मॉड्यूल) की आवश्यकता होती है, तो आपको वेबपैक कॉन्फ़िगरेशन पर काम करना होगा। फ़ीचर कहानी - अपने कोणीय अनुप्रयोग में वेबपैक कॉन्फ़िगरेशन को अनुकूलित करें ।

एंगुलर से रिएक्ट में एप्लिकेशन को पूरी तरह से माइग्रेट करने के लिए, आपको अभी भी रिएक्ट-कंपोनेंट्स में सेवाओं को लागू करने की समस्या को हल करना होगा। एक सरल तरीका यह है कि आप एक रैपर घटक में सेवा प्राप्त करें और इसे प्रॉपर के माध्यम से पास करें। मुश्किल तरीका यह है कि एक परत लिखी जाए जो इंजेक्टर से टोकन द्वारा सेवाएं प्राप्त करेगी। लेख के दायरे से परे इस मुद्दे पर विचार।

बोनस

यह समझना महत्वपूर्ण है कि एंगुलर के 85KB के इस दृष्टिकोण के साथ, लगभग 40KB react और react-dom कोड react जाता react । इससे एप्लिकेशन की गति पर महत्वपूर्ण प्रभाव पड़ सकता है। मैं लघु प्रीरेक्ट का उपयोग करने पर विचार करने की सलाह देता हूं, जिसका वजन केवल 3KB है। इसका एकीकरण लगभग अलग नहीं है।

1. tsconfig.json एक नया संकलन विकल्प जोड़ते हैं - "jsxFactory": "h" , यह इंगित करेगा कि आपको "jsxFactory": "h" को बदलने के लिए h फ़ंक्शन का उपयोग करने की आवश्यकता है। अब, import { h } from 'preact' कोड वाली प्रत्येक फ़ाइल में - import { h } from 'preact' ।
2. सभी कॉल React.createElement को React.createElement द्वारा प्रतिस्थापित किया Preact.h ।
3. सभी कॉल ReactDOM.render को ReactDOM.render द्वारा प्रतिस्थापित किया Preact.render ।

हो गया! रिएक्ट से प्रैक्टिस की ओर पलायन के निर्देश पढ़ें। व्यावहारिक रूप से कोई मतभेद नहीं हैं।

यूपीडी 19.9.19 16.49

टिप्पणियों से विषयगत लिंक - माइक्रो फ्रंटेंड

UPD 20.9.19 14.30

टिप्पणियों से एक और विषयगत लिंक - माइक्रो फ्रंटेंड्स