GetDerivedStateFromProps में prevProps की कमी का समाधान

नमस्कार दोस्तों!

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

रिएक्टर उपयोगकर्ताओं की नाराज टिप्पणियों के जवाब में डेवलपर्स लिखते हैं कि वे कहते हैं: ठीक है, हमने आपको प्रॉपप्रॉप्स नहीं दिए हैं, यह संभव नहीं है, कुछ के बारे में सोचें, प्रॉप्रॉप्स नहीं करते हैं, ठीक है, आप वहां रहते हैं, बस उन्हें एक राज्य में रखें, सामान्य तौर पर वे सुझाव देते हैं कि हम अपने छोटे बैसाखी बनाते हैं। नया अच्छा कोड। यह सब आसान है, बेशक, आप समझ सकते हैं और माफ कर सकते हैं, लेकिन मैं इस तथ्य से नाराज था कि अब मेरे पास यह संदर्भ नहीं है, मेरे कमरे को ईंट दिया गया था, इससे कुछ भी दिखाई नहीं दे रहा है, यहां तक ​​कि मेरे पड़ोसियों को भी नहीं सुना गया है, इसलिए मैंने एक बात लिखने का फैसला किया यह अपने आप में सभी बैसाखियों को छिपाएगा और मेरा कोड अजीब लगेगा, लेकिन बोनलेस (और बोनलेस?)।

सामान्य तौर पर, मुझे घटक की स्थिति में prevProps को लागू करने की आवश्यकता होती है, मैं यह भी चाहता हूं कि सब कुछ हमेशा की तरह दिखे, और स्थिर getDerivedStateFromProps (यह एक मूर्ख है!) में इस जादू के बिना जीना असंभव है। दो दिनों की पीड़ा और आत्म-सुधार और सब कुछ तैयार है, मैंने एक चूहे को जन्म दिया।

स्थापना

npm install --save state-master 

के उपयोग

बस एक ही getDerivedStateFromProps और ComponentsDidUpdate लिखें, लेकिन पहले से ही संशोधित।
हम अपने घटक को "withStateMaster" में लपेटते हैं, वहाँ "प्रॉपर" की एक सूची पास करते हैं जिनके परिवर्तनों को आपको ट्रैक करने की आवश्यकता है

 import {Component} from 'react' import {withStateMaster, registerContext, unregisterContext} from 'state-master'; //  "",     const PROP_LIST = ['width', 'height', 'bgColor', 'fontSize', 'autoSize']; //   ,     const PROP_LIST = 'value'; //     const INITIAL_STATE = { width: 1000, height: 500 }; class ContainerComponent extends Component { static displayName = 'Container'; static getDerivedStateFromProps(data) { const { nextProps, prevProps, state, isInitial, changed, changedProps, isChanged, add, addIfChanged, isChangedAny, addIfChangedAny, isChangedAll, call, get } = data; //      ,   ,      PROPS_LIST //   ,       if (isInitial) { //   "name"    "value"     add('name', value); //   "name"       add('name'); } // changedProps  ,       if (changedProps.indexOf('value') !== -1) { add('value'); } //  true   prop -  if (isChanged('autoSize')) { add('autoSize'); } //  true   prop     (  true) if (isChanged('autoSize', true)) { add('autoSize', true); } // changed  true,     -  if (changed) { add('somethingChanged', true); } //  true,     -  //   ,     if (isChangedAny()) { add('somethingChanged', true); } //  true,      -  if (isChangedAny('bgColor', 'fontSize', ...)) { const {bgColor, fontSize} = nextProps; add('style', {bgColor, fontSize}); } //  true,      PROPS_LIST -  if (isChangedAll()) { add('allChanged', true); } //  true,      -  if (isChangedAll('width', 'height', ...)) { const {width, height} = nextProps; add('size', width + 'x' + height); //     //   ,   setTimeout(() => this.changeSomething(), 0); //   - ,        //       componentDidUpdate call(() => { this.initNewSizes(width, height); }); } //   "add",   prop -  addIfChanged('name', value); addIfChanged('name'); //   "add",  - prop   PROPS_LIST -  addIfChangedAny('name', value); addIfChangedAny('name'); //      null //   ,  ,     //    console.log(get()); //     "add",      //      ,       "add" return { size: nextProps.width + 'x' + nextProps.height } } constructor(props) { super(props); //  "registerContext",    this   getDerivedStateFromProps //     ,     "registerContext",       registerContext(this); } //      componentDidUpdate(data) { const { prevProps, prevState, snapshot, changedProps, changed, isChanged, isChangedAny, isChangedAll } = data; if (isChanged('value')) { const {value} = this.props; this.doSomeAction(value); } } componentWillUnmount() { //    ,  "registerContext"     unregisterContext(this); } render() { const {style, size} = this.state; return ( <div className="container" style={style}> Size is {size} </div> ) } } export const Container = withStateMaster(ContainerComponent, PROP_LIST, INITIAL_STATE); 

यदि घटक दूसरे से विरासत में मिला है, तो माता-पिता को पास करें ताकि माता-पिता getDerivedStateFromProps को बुलाया जाए

 export const Container = withStateMaster(ContainerComponent, PROP_LIST, null, ParentalComponent); 

यह इस समस्या का मेरा समाधान है (हालाँकि शायद मैंने प्रतिक्रिया को पर्याप्त रूप से नहीं समझा है, और यह कोई समस्या नहीं है)।

इसलिए मैंने रिएक्ट के नए कैनन का विरोध किया, हो सकता है कि किसी दिन मैं खुद को विनम्र करूं और हर चीज को फिर से लिखूं जैसा कि उसे करना चाहिए।

हालांकि डेवलपर्स शायद फिर से सब कुछ फिर से करेंगे और अन्य दबाने वाले मुद्दे पैदा होंगे।
यह वही है, मैं लेट गया, लेकिन वे लोगों को अपाहिज नहीं मार रहे हैं, जैसा कि वे कहते हैं।