OnClick हैंडलर में पैरामीटर पास करने का सबसे अच्छा तरीका

Question

यह मेरा घटक है मैं onClickdiv के मार्ग को बदलने के लिए इनलाइन तीर फ़ंक्शन का उपयोग कर रहा हूं, लेकिन मुझे पता है कि यह प्रदर्शन के मामले में अच्छा तरीका नहीं है

1. इनलाइन एरो फंक्शन

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={() => this.changeRoute("page1")}>1</div>
      <div onClick={() => this.changeRoute("page2")}>2</div>
    </>
  )
}

2. अगर मैं कंस्ट्रक्टर बाइंडिंग का उपयोग करता हूं तो मैं प्रॉपर कैसे पास कर सकता हूं?

constructor() {
  super(props)
  this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute}>1</div>
      <div onClick={this.changeRoute}>2</div>
    </>
  )
}

3. अगर मैं एरो फंक्शन को हटा देता हूं तो फंक्शन को रेंडर पर ही बुलाया जा रहा है

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute("page1")}>1</div>
      <div onClick={this.changeRoute("page2")}>2</div>
    </>
  )
}

4. यदि मैं इनलाइन बाइंडिंग का उपयोग करता हूं तो यह प्रदर्शन के साथ भी सबसे अच्छा नहीं है

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute.bind(this, "page1")}>1</div>
      <div onClick={this.changeRoute.bind(this, "page2")}>2</div>
    </>
  )
}

फिर मैं सबसे अच्छे तरीके से गुजरने वाले मापदंडों के साथ कैसे आगे बढ़ सकता हूं?

Comments

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

— इल्मरी करोनें

@IlmariKaronen अधिकांश मामलों में घटक बार-बार पुन: प्रस्तुत होते हैं क्योंकि घटकों में इनपुट फ़ील्ड होती है और टाइपिंग और e.target.value को बार-बार रेंडर करने की स्थिति में होता है।

— डार्क नाइट

Answer 1

आप अपने changeRouteहैंडलर को परिभाषित करने के लिए एरो फंक्शन का उपयोग कर सकते हैं ।

इस रूप में जाना जाता है Class field syntax। आधिकारिक प्रतिक्रिया डॉक्स में यहाँ इस पर अधिक ।

constructor() {
  super(props)
}

const changeRoute = (parameter) => (event) => {
    // business logic for route change.
}

तब आप इस फ़ंक्शन को सीधे उपयोग कर सकते हैं:

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}

आपको बंधन के बारे में चिंता करने की ज़रूरत नहीं है। एरो फ़ंक्शंस उनके माता-पिता को विरासत में मिलते हैं this।

Comments

@DarkKnight आपकी आखिरी टिप्पणी था executing on the go। मेरा जवाब उसी के जवाब में है। मैं आपको यह बताने की कोशिश कर रहा हूं कि execute on the goअगर आपने पोस्ट किया है तो आप अपने हैंडलर को परिभाषित नहीं करेंगे ।

— उत्सव पटेल

Pls इसे देखें

— डार्क नाइट

@DarkKnight कृपया इस प्रतिक्रिया पढ़ें jj.org.org/docs/handling-events.html क्लास फ़ील्ड सिंटैक्स आधिकारिक प्रतिक्रिया डॉक्स द्वारा अनुशंसित तरीकों में से एक है।

— उत्सव पटेल

ठीक है धन्यवाद सर

— डार्क नाइट

Answer 2

आप अपने div में एक डेटा जोड़ सकते हैं:

<div data-id={1} onClick={this.changeRoute}>1</div>

फिर आप उस डेटा को अपने ऑनक्लिक हैंडलर में पुनः प्राप्त कर सकते हैं:

onClick = (event) => {
  const id = event.currentTarget.dataset.id;
}

Comments

शानदार दृष्टिकोण!

— अधिकतम

हा हा हा ... किया जा सकता है। लेकिन प्रतिक्रिया खुद के आसपास काम नहीं करती है?

— डार्क नाइट

Answer 3

# 1 ठीक है।

# 2 भी 'ठीक' है, लेकिन आपको प्रॉपर पास करने की जरूरत है, फिर रेंडर फंक्शन बिल्कुल # 1 जैसा दिखेगा । आप bind'डी फंक्शन' कह रहे होंगे , क्योंकि आपने इसे कंस्ट्रक्टर में बदल दिया था।

# 3 सिर्फ गलत है, क्योंकि फ़ंक्शन रेंडर के दौरान कहा जाता है।

और प्रतिक्रिया डॉक्स से # 4 के बारे में

हम आमतौर पर इस प्रकार की प्रदर्शन समस्या से बचने के लिए, कंस्ट्रक्टर में बाइंडिंग या क्लास फ़ील्ड सिंटैक्स का उपयोग करने की सलाह देते हैं।

यह एक प्रदर्शन दंड का कारण बनता है जब आपके फ़ंक्शन का उपयोग इसके बाल घटकों में किया जाता है और बच्चे के घटकों को फिर से प्रस्तुत करने का कारण होगा (यह आपके मामले में नहीं)। इसलिए आपको # 4 नहीं करना चाहिए ।

Answer 4

वर्तमान में अपने ईवेंट हैंडलर को useCallbackहुक में लपेटने का सबसे अच्छा तरीका है क्योंकि यह आपके हैंडलर फ़ंक्शन को हर बार रेंडर करने से रोकता है।

import React, { useCallback } from 'react'

const MyComponent = ({ changeRoute }) => {
  const eventHandler = useCallback(() => {
    changeRoute('page1')
  }, [changeRoute])

  return (
    <div onClick={eventHandler}>1</div>
  )
}

अधिक जानकारी के लिए चेक- कॉलबैक डॉक्स का उपयोग करें

Comments

ओपी एक वर्ग घटक का उपयोग करता हुआ दिखाई देगा, जहां आप हुक का उपयोग नहीं कर सकते हैं।

— टीजे क्राउडर

मुझे उम्मीद है कि मेरा जवाब उसे बेहतर तरीके से समझने में मदद करेगा

— अलेह एट्समैन