🔡 ♻️ 🛀🏻 आपके रिएक्ट कोड में सबसे आम गलतियाँ जो आप (संभवतः) करते हैं 👩🏼‍🌾 👉🏽 🚣🏻

माध्यम पर पढ़े गए लेखों से प्रेरित होकर, मैंने अपना लेख लिखने का फैसला किया और आपको बताया कि आपके रिएक्ट एप्लिकेशन में सबसे आम गलतियों से कैसे बचें और आपको ऐसा करने की आवश्यकता क्यों है।

सभी कोड ईएस 6 शैली में लिखे गए हैं, इसलिए इसे दोहराने के लिए आपको अपने प्रोजेक्ट में बैबल का उपयोग करने की आवश्यकता है (और अन्य हैं जो इसका उपयोग नहीं करते हैं?)।

मैंने प्रत्येक त्रुटि को यथासंभव विस्तार से समझाने की कोशिश की, इसलिए, मेरा लेख उन युवा डेवलपर्स पर अधिक केंद्रित है जो अभी भी नए ज्ञान की तलाश में हैं। हालांकि, यह मुझे लगता है, एक अनुभवी डेवलपर इस लेख में अपने लिए कुछ दिलचस्प चीजें पा सकता है।

यदि आप रुचि रखते हैं, तो बिल्ली में आपका स्वागत है।

प्रत्येक पैराग्राफ से पहले कोष्ठक में, मैंने एस्लिंट नियम का लिंक छोड़ दिया। आप बाद में उन्हें खोज सकते हैं और उन्हें अपने प्रोजेक्ट में जोड़ सकते हैं।

(प्रतिक्रिया / निषिद्ध-घटक-सहारा)

पहली आम गलती है 'स्टाइल' और 'क्लासनेम' को अपने कंपोनेंट के लिए सहारा देना। इससे बचें क्योंकि आप अपने घटकों में बहुत अधिक जटिलता जोड़ते हैं।

इसके बजाय, यह पुस्तकालय उपयोग करना संभव है 'classnames' और अपने घटक के लिए कुछ दिलचस्प भिन्नता जोड़ने (यदि आप सीएसएस वर्गों का उपयोग कर रहे हैं):

const { hasError, hasBorder } = this.props; const componentClasses = classnames({ 'your-component-main-class': true, 'your-component-main-class_with-error': hasError, 'your-component-main-class_with-border': hasBorder, });

(प्रतिक्रिया / निषेध-प्रो-प्रकार)

अगली त्रुटि सूचनात्मक प्रोपेइट्स नहीं है। PropTypes.any, PropTypes.array और PropTypes.object का उपयोग न करें। अपनी प्रॉप्स का यथासंभव वर्णन करें। यह आपको भविष्य के लिए अच्छे दस्तावेज छोड़ने की अनुमति देगा, और आप (या अन्य डेवलपर) आपको कई बार धन्यवाद देंगे।

 class MyComponent extends React.Component { static propTypes = { user: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, }), policies: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number, type: PropTypes.string, value: PropTypes.string, }), } }

(प्रतिक्रिया / निषिद्ध-विदेशी-प्रोप-प्रकार)

चलो PropTypes के साथ जारी रखें। किसी अन्य घटक के प्रोपटीप का उपयोग न करें:

 import SomeComponent from './SomeComponent'; SomeComponent.propTypes;

एक ऐसी फ़ाइल बनाएँ जिसमें आप अपने वैश्विक प्रोपेइट्स को क्रम में रखेंगे:

 import { userShape, policiesArray } from '../common/global_prop_types';

यह बेबल-प्लगइन-ट्रांसफॉर्मेशन-रिएक्शन- प्रो -प्रॉप-टाइप प्रॉपटीज़ को प्रोडक्शन कोड से हटाने में मदद करेगा और आपके एप्लिकेशन को थोड़ा आसान बना देगा।

(प्रतिक्रिया / नहीं-एक्सेस-स्टेट-इन-सेटस्टेट)

निम्नलिखित त्रुटि बहुत दिलचस्प है:

 class MyComponent extends React.Component { state = { counter: 1, }; incrementCounter = () => this.setState({ counter: this.state.counter + 1 }); massIncrement = () => { // this code will lead to not what you expect this.incrementCounter(); this.incrementCounter(); } }

क्योंकि setState दोनों मामलों में राज्य का एक अतुल्यकालिक राज्य कार्य समान होगा।
this.state.counter 1 होगा और हम प्राप्त करेंगे:

 incrementCounter = () => this.setState({ counter: 1 + 1 }); incrementCounter = () => this.setState({ counter: 1 + 1 });

इससे बचने के लिए, आप सेटस्टैट कॉलबैक का उपयोग कर सकते हैं जो एक तर्क के रूप में राज्य को प्राप्त होता है:

 incrementCounter = () => this.setState((prevState) => ({ counter: prevState.counter + 1 }));

(प्रतिक्रिया / नहीं-सरणी-सूचकांक-कुंजी)

यह त्रुटि भी बहुत आम है, इसलिए, ध्यान से पढ़ें और भविष्य में इससे बचें:

 users.map((user, index) => ( <UserComponent {...user} key={index} /> ));

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

 users.map((user) => ( <UserComponent {...user} key={user.id} /> ));

(प्रतिक्रिया / नहीं-माउंट-सेट-राज्य), (प्रतिक्रिया / नहीं-किया-अपडेट-सेट-राज्य)

यह त्रुटि मेरे अभ्यास में भी बहुत आम है। यदि आप कंपोनेंटडायडडेट विधि में स्थिति को अपडेट करने का प्रयास करते हैं, तो आपको एक अनंत री-रेंडर लूप मिलता है। प्रतिक्रिया तब पुन: प्रतिपादन के लिए एक चेक शुरू करती है जब घटक राज्य या प्रॉप्स बदलता है। यदि आप DOM में माउंट होने के बाद स्टेट बदलते हैं या पहले ही अपडेट हो चुके हैं, तो आप बार-बार चेक चलाएंगे ...
कंपोनेंटडिमाउंट में स्थिति को अपडेट करते समय, आप घटक को एक बार फिर से रेंडर कर सकते हैं, क्योंकि डीओएम में घटक के माउंट होने के बाद फ़ंक्शन को एक बार कॉल किया जाता है।
यदि आपको घटक को माउंट करने के बाद डेटा को अपडेट करने की आवश्यकता है, तो मैं कक्षा चर का उपयोग करने का सुझाव देता हूं:

 class MyComponent extends React.Component { componentDidMount() { this.veryImportantDataThatCanBeStoredOnlyAfterMount = 'I'll be back!'; } veryImportantDataThatCanBeStoredOnlyAfterMount = void 0; render() { return <div /> } }

(प्रतिक्रिया / नहीं-प्रत्यक्ष-उत्परिवर्तन-अवस्था)

राज्य उत्परिवर्तन एक बहुत बड़ी गलती है। एक अनियंत्रित राज्य उत्परिवर्तन से अवांछनीय कीड़े पैदा होंगे और, बड़ी समस्याओं के रूप में। मेरी निजी राय अपरिवर्तनीय जीएस का उपयोग है, एक पुस्तकालय के रूप में जो अपरिवर्तनीय संरचनाओं को जोड़ता है। और आप उन्हें Redux / MobX / किसी भी राज्य प्रबंधन पुस्तकालय के साथ उपयोग कर सकते हैं। आप डीप क्लोन का उपयोग लॉकेट से क्लोन स्थिति तक कर सकते हैं और फिर क्लोन को म्यूट कर सकते हैं, या नए JS फ़ीचर का उपयोग कर सकते हैं - पुनर्निर्माण :

 updateStateWrong = () => this.state.imRambo = true; updateStateRight = () => { const clonedState = cloneDeep(this.state); clonedState.imAGoodMan = true; this.setState(clonedState); } updateWithImmutabelJS = () => { const newState = this.state.data.set('iUseImmutableStructure', true); this.setState(data: newState); } updateWithDestructuring = () => this.setState({ ...this.state, iUseDestructuring: true });

(प्रतिक्रिया / पसंद-स्टेटलेस-फंक्शन)

यह नियम त्रुटि की तुलना में आपके कोड और एप्लिकेशन के अधिक सुधार का वर्णन करता है, लेकिन मैं फिर भी आपको इस नियम का पालन करने की सलाह देता हूं। यदि आपका घटक राज्य का उपयोग नहीं करता है, तो इसे एक स्टेटलेस घटक बनाएं (मैं 'शुद्ध घटक' शब्द पसंद करता हूं):

 class MyComponentWithoutState extends React.Component { render() { return <div>I like to write a lot of unneeded code</div> } } const MyPureComponent = (props) => <div>Less code === less support</div>

(प्रतिक्रिया / प्रस्ताव-प्रकार)

यदि आपका घटक प्रॉप्स प्राप्त करता है तो हमेशा प्रॉप्स टाइप चेकिंग (प्रोपेप्ट्स) जोड़ें। इसे अपने कोड के दस्तावेज के रूप में सोचें। एक बार से अधिक आप अपने आप को इस (और शायद मेरे लिए :)) के लिए 'धन्यवाद' कहेंगे। PropTypes आपको यह समझने और समझने में मदद करेगा कि आपका घटक क्या प्रस्तुत कर सकता है, साथ ही उसे प्रतिपादन के लिए क्या चाहिए।

 MyPureComponent.propTypes = { id: PropTypes.number.isRequired, // And I know that without id component will not render at all, and this is good. }

(प्रतिक्रिया / jsx-no-bind)

एक बहुत ही सामान्य और बड़ी गलती जो मैंने कई बार कोड में देखी। Jsx में बाइंड और एरो फंक्शन का उपयोग न करें। कभी नहीं। अधिक।
नरक में सबसे गर्म स्थान उस व्यक्ति का इंतजार करता है जो इवेंट हैंडलर में JSX में .bind (यह) लिखता है।
हर बार एक घटक प्रदान किया जाता है, आपका फ़ंक्शन फिर से बनाया जाएगा, और यह आपके एप्लिकेशन को बहुत धीमा कर सकता है (यह इस तथ्य के कारण है कि कचरा कलेक्टर को अधिक बार चलाने के लिए मजबूर किया जाएगा)। .Bind (यह) के बजाय, आप एक निश्चित तरीके से एरो फ़ंक्शंस का उपयोग कर सकते हैं:

 class RightWayToCallFunctionsInRender extends React.Component { handleDivClick = (event) => event; render() { return <div onClick={this.handleDivClick} /> } } const handleDivClick = (event) => event; const AndInPureComponent = () => { return <div onClick={handleDivClick} /> }

(प्रतिक्रिया / jsx-no-target-blank)

सुरक्षा बग यह मुझे बहुत अजीब लगता है कि लोग अब भी यह गलती करते हैं। बहुत से लोगों ने 2017 में इस विषय पर बहुत सारे लेख लिखे।
यदि आप लक्ष्य = '_ blank' विशेषता के साथ एक लिंक बनाते हैं, तो इसे rel = 'noreferrer noopener' में जोड़ना सुनिश्चित करें। बहुत सरल:

 <a href="https://example.com" target="_blank" rel="noreferrer noopener" />

आपका धन्यवाद

यह सब मैं आपको इस लेख के भाग के रूप में बताना चाहूंगा। मैं बहुत आभारी रहूंगा यदि आप, मेरे पाठक, मुझे अपनी प्रतिक्रिया या टिप्पणी दें और इस आलेख में बताई गई समस्याओं के बारे में अपनी राय साझा करें। इसके अलावा, आप मुझे कोड में मेरी और आपकी गलतियों के बारे में बता सकते हैं और उन सभी चीजों के बारे में, जिन्हें आप बताना आवश्यक समझते हैं। फिर से शुक्रिया!

आपके रिएक्ट कोड में सबसे आम गलतियाँ जो आप (संभवतः) करते हैं