प्रतिक्रिया दस्तावेज़

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

प्रतिक्रिया दस्तावेज़:-

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

वर्ग आधारित घटक के लिए यह ठीक है, कार्यात्मक घटक के बारे में क्या।

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

मेरे पास 3 भिन्न प्रकार हैं

const LoggingButtion = (props)=>{
 const [ loggedStatus, setLogStatus] = useState(false);

const handleClick =()=> {
    console.log('Button Clicked');
   setLogStatus(true)
  }
 return (
      <button onClick={() => { console.log('button clicked'); setLogStatus(false)} > // Type1
      <button onClick={() => handleClick()}> // type 2
      <button onClick={handleClick}> // type 3
        Click me
      </button>
    );
}
1
stevevar 27 अक्टूबर 2020, 06:04

1 उत्तर

सबसे बढ़िया उत्तर

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

यह केवल तभी मायने रखता है जब ऐप इतना बड़ा हो कि यह प्रदर्शन के मुद्दों का कारण बन रहा हो, जिसकी संभावना नहीं है। useCallback से बचना कोड को पढ़ने में आसान बनाता है और 97% मामलों में ठीक काम करेगा। लेकिन अगर आप ऐसी स्थिति का करते हैं जहां बाल घटक बहुत बार पुन: प्रस्तुत कर रहे हैं, और आपके पास पर्याप्त घटक हैं जो प्रदर्शन प्रभाव दिखाई दे रहे हैं, तो आगे बढ़ें और useCallback का उपयोग करें:

const handleClick = useCallback(() => () => {
  console.log('Button Clicked');
  setLogStatus(true)
}, []);

लेकिन, ध्यान दें कि आपके यहां चाइल्ड कंपोनेंट्स नहीं हैं, केवल <button>s हैं। जबकि एक अलग ईवेंट श्रोता को प्रत्येक प्रस्तुत करने वाले प्रत्येक तत्व से जोड़ा जाना है, यह भी कोई समस्या नहीं है।

useCallback के बिना, जो आप वर्तमान में कर रहे हैं, उसे बेझिझक करें, और केवल useCallback में बदलें यदि पुन: प्रतिपादन एक समस्या साबित होती है।

2
CertainPerformance 27 अक्टूबर 2020, 06:10