लगभग एक महीने पहले रिएक्ट हुक बाहर आए, और तुरंत यह स्पष्ट हो गया कि रिएक्ट-हॉट-लोडर रास्पबेरी को खराब कर देता है और न केवल उनके साथ बहुत संगत है, बल्कि यह बाकी कोड भी तोड़ता है। सामान्य तौर पर, यह एक गर्म महीना था ...

अंदर क्या है?

• HMR के लिए नया एपीआई
• पूर्ण प्रतिक्रिया 16.6 समर्थन - React.lazy, React.memo, और अग्रेषित करें
• बेशक हुक
• प्रतिक्रिया - डोम (जो भी इसका मतलब है)
• वेबपैक प्लगइन
• स्वचालित त्रुटिबाउंडरी
• शुद्ध रेंडर
• "सिद्धांतों"

HMR के लिए नया एपीआई

यहां, लगभग कुछ भी नहीं बदला है - यह hot था - hot । बस छोटा और चालाक हो गया:

से पहले

 import {hot} from 'react-hot-loader'; .... export default hot(module)(MyComponent) 

अब

 import {hot} from 'react-hot-loader/root'; .... export default hot(MyComponent) 

वास्तव में, नया hot सिर्फ पुराना है, दो भागों में विभाजित है। नतीजतन, स्थितियों का पता लगाना संभव है जब पहला भाग बुलाया गया था, और दूसरा नहीं ( विवरण )।

प्रतिक्रिया 16.6 समर्थन

forwardRef सिर्फ काम करता है (किसी ने यह नहीं कहा कि वे पहले काम नहीं करते थे), memo को इस तथ्य के बावजूद अपडेट किया जाएगा कि यह memo , लेकिन lazy ने अपने forwardRef को फिर से आयात करना सीखा।

और हां, सब कुछ ताबूत से बाहर काम करता है।

प्रतिक्रिया हुक समर्थन करते हैं

16.7 की रिहाई के बाद, यह स्पष्ट हो गया कि हुक के साथ परेशानी। दुर्भाग्य से, स्टोरीबुक ( मुद्दा ) और गैट्सबी ( मुद्दा ) जैसी बड़ी परियोजनाएं इस आपदा से प्रभावित हुईं।

समस्या रिएक्ट-हॉट-लोडर की प्रकृति से बहती है - प्रतिक्रिया को चकमा देने के लिए और पेड़ के पुराने संस्करण को नष्ट करने से रोकने के लिए, हॉटेलैडर प्रत्येक घटक को एक रैपर में लपेटता है जो केवल "वास्तविक" घटक के लिए लिंक को बदलता है।
बेशक, एसएफसी अवयवों में लिपटे हुए थे, और सब कुछ टूट गया।

वास्तव में, SFC ने SFC के साथ घूमा जो कि कक्षा का एक उदाहरण है। एक बहुत ही अनिर्दिष्ट "कारखाना" प्रतिक्रिया सुविधा।

समुदाय को जल्दी से एक रास्ता मिल गया (जो मैंने खुद अभी नहीं सोचा {pureSFC: true} ), सौभाग्य से, मुझे केवल एक विकल्प बदलना पड़ा - {pureSFC: true} , और RHL ऑपरेशन के एक सरल मोड में जाएगा, जो पहले एक गहरी समस्या के कारण बंद हो गया था- बल-अद्यतन, जिसे हमने अब अद्यतन भी किया है।

प्रतिक्रिया-गर्म डोम

हॉट-लोडर हमेशा हैकिंग रिएक्ट के बारे में रहा है, और इसने React-Dom अंदर चेक को ट्रिक करने के लिए createElement को ओवरलोड createElement और " createElement " घटकों को वापस करके किया। अब हॉट-लोडर यह बहुत ही जाँच हैक करेगा :) यह आश्चर्यजनक रूप से काम करता है।

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

पैच लगाना सरल है:

 // this would always work yarn add @hot-loader/react-dom@npm:react-dom // or change your webpack config alias: { 'react-dom': '@hot-loader/react-dom' } // or do the same with package.json to enable it in parcel 

जो लोग बाएं हाथ के पैकेज को स्थापित नहीं करना चाहते हैं, उनके लिए बंडल वेबपैक-लोडर के साथ आता है जो विशेष रूप से प्रतिक्रिया-डोम के आपके संस्करण को पैच करेगा।

Webpack-लोडर

वही वेबपैक लोडर जिसे हमने संस्करण 4 में लिया था वह फिर से हमारे पास लौट आया। क्यों?

• जल्दी से नोड_मॉड्यूल्स को पकड़ना और अधिक कोड जानकारी प्रदान करना
• प्रतिक्रिया-डोम को पैच करने के लिए
• उन लोगों के लिए जो बेबल पसंद नहीं करते हैं

स्वचालित त्रुटिबाउंडरी

विकास के दौरान त्रुटियां एक पसंदीदा चीज है, लेकिन किसी को भी त्रुटियां + प्रतिक्रिया-हॉट-लोडर पसंद नहीं है - यह सिर्फ बहुत अच्छी तरह से काम नहीं करता है, और कभी-कभी यह बिल्कुल काम नहीं करता है।

संस्करण 4.6 से शुरू होकर, रिएक्ट-हॉट-लोडर अपडेट की शुरुआत से पहले सभी घटकों में कंपोनेंटडचैच को जोड़ देगा, और अपडेट के बाद इसे हटा देगा। त्रुटियों को "बस-इन-प्लेस" पकड़ा और प्रदर्शित किया जा सकता है।

यह एक तिपहिया की तरह लगता है, लेकिन यह तिपहिया पूरी विकास प्रक्रिया को बदल देता है। और हां, सब कुछ आपके स्वाद के अनुरूप है।

"शुद्ध" रेंडर

यह समस्या हमेशा हॉट-लोडर के साथ रही है। जब तक उन्होंने अपनी नाक नहीं खोली । संक्षेप में - रिएक्ट देव टूल्स में, आप मेनू पर राइट-क्लिक कर सकते हैं और सीधे कंपोनेंट पर जा सकते हैं ... अधिक सटीक (यह था) आप ऐसा नहीं कर सकते

अब एक pureRender विकल्प है, जब तक कि इसे डिफ़ॉल्ट रूप से बंद कर दिया जाता है, जो इस समस्या को जन्म देने वाले घटक से कुछ दुष्प्रभावों को हटा देता है।

दुर्भाग्य से, यह केवल "क्लास आधारित" घटकों के लिए काम करता है, एसएफसी के लिए प्रतिक्रिया-डोम में एक पैच की आवश्यकता होती है, जो ऊपर उल्लेख किया गया था।

सिद्धांत रूप में, अब सिस्टम में हॉटेलैडर की उपस्थिति को व्यावहारिक रूप से छिपाने का अवसर है।

सिद्धांतों

सिर्फ एक हफ्ते पहले, दान अब्रामोव ने गर्म-लोडर के लिए अपनी इच्छा सूची प्रकाशित की - 22 सिद्धांत जो गर्म-लोडर को सफेद और शराबी नहीं होने के लिए "सही" होने के लिए मिलना चाहिए।

वर्तमान में, 14 अंक 100% पूर्ण हो चुके हैं, और अन्य 4 से 50% हैं। कुल - 22 में से 17. सिद्धांत में, बुरा नहीं है, और यह स्पष्ट है कि बाकी को खत्म करने के लिए क्या करने की आवश्यकता है।
कौन जानता है, हो सकता है कि इसके बाद डैन परियोजना में वापस आ जाए।

तो क्या

• बस अपने हॉट लोडर को अपग्रेड करें!
• पुराने hot को नए hot साथ बदलें, मुझे पता है कि यह अजीब लगता है, लेकिन आप मुझे समझते हैं।
• किसी तरह से प्रतिक्रिया-डोम को पैच करने की कोशिश करें। यह इतना आवश्यक नहीं है, इस कदम के बिना सब कुछ अच्छा काम करेगा - लेकिन इसके साथ बहुत अच्छा होगा।
• बस इतना ही। यह काम करना चाहिए। बस इसे एक कोशिश दे।

तुम्हारे साथ ️ था

https://github.com/gaearon/react-hot-loader