1- रिएक्ट हुक

] आप प्रदर्शन अनुकूलन के लिए

usecallback

/

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

उदाहरण

:

}> सस्पेंस> 4। त्रुटि सीमा ] ] त्रुटि सीमा त्रुटियों का पता लगाएगी और लपेटे हुए घटक पेड़ के भीतर होने पर फॉलबैक यूआई को दिखाएगी।

उदाहरण

:

] कंस्ट्रक्टर (प्रॉप्स) { सुपर (प्रॉप्स); this.state = {haserror: false}; } STATIC getDerivedStateFromError (त्रुटि) { // अपडेट स्टेट तो अगला रेंडर फॉलबैक यूआई दिखाएगा। वापसी {haserror: true}; } ComponentDidCatch (त्रुटि, जानकारी) { // उदाहरण "घटक": // घटक में (ऐप द्वारा निर्मित) में // errorboundary में (ऐप द्वारा बनाया गया) // div में (ऐप द्वारा बनाया गया) // ऐप में logerRortomyService (त्रुटि, info.componentstack); } प्रदान करना() { if (this.state.haserror) { // आप किसी भी कस्टम फॉलबैक यूआई को प्रस्तुत कर सकते हैं इसे लौटाएं। } इसे वापस करें। props.children; } } कुछ गलत हो गया

}> 5। संदर्भ के साथ डेटा पास करना

] लेकिन पासिंग प्रॉप्स क्रिया और असुविधाजनक बन सकते हैं यदि आपको उन्हें बीच में कई घटकों से गुजरना है, या यदि आपके ऐप के कई घटकों को समान जानकारी की आवश्यकता है। ] 6। राज्य प्रबंधन ] Redux का उपयोग करके एप्लिकेशन स्थिति का प्रबंधन करें।

7। कोड फंसा

}>
  

तृतीय-पक्षीय पुस्तकालयों

शामिल हैं। आपको उस कोड पर नज़र रखने की आवश्यकता है जिसे आप अपने

बंडल

में शामिल कर रहे हैं, ताकि आप गलती से इसे इतना बड़ा न बनाएं कि आपका ऐप लोड करने के लिए लंबे समय तक लेता है।

] ] ] जब आपने अपने ऐप में कोड की समग्र मात्रा को कम नहीं किया है, तो आपने लोडिंग कोड से परहेज किया है जिसकी उपयोगकर्ता को कभी भी आवश्यकता नहीं हो सकती है, और

प्रारंभिक लोड

के दौरान आवश्यक कोड की मात्रा को कम कर दिया है।

निष्कर्ष
इस लेख में, मैंने प्रतिक्रिया

में उन्नत अवधारणाओं के बारे में लिखा था

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


Something went wrong}>
  

में

प्रदर्शन और स्थिरता में सुधार करती हैं। आप मूल रूप से इन अवधारणाओं को समझ और उपयोग कर सकते हैं