🦁 🕞 ◼️ रिएक्ट में कॉलबैक के साथ काम करना 👌🏻 📇 🧑🏾

अपने काम के दौरान, मैं समय-समय पर इस तथ्य के बारे में आया कि डेवलपर्स हमेशा स्पष्ट रूप से नहीं समझते हैं कि विशेष कॉलबैक में, प्रॉप्स के माध्यम से डेटा संचारित करने का तंत्र कैसे होता है, और उनके प्योरकॉमर्स को इतनी बार क्यों अपडेट किया जाता है।

इसलिए, इस लेख में हम समझेंगे कि कॉलबैक को कैसे रिएक्ट में पारित किया जाता है, और घटना संचालकों की विशेषताओं पर भी चर्चा की जाती है।

टीएल, डॉ

जेएसएक्स और व्यावसायिक तर्क के साथ हस्तक्षेप न करें - यह कोड की धारणा को जटिल करेगा।
छोटी ऑप्टिमाइज़ेशन के लिए, कैश हैंडलर कक्षाओं के लिए classProperties के रूप में या फ़ंक्शंस के लिए useCallback का उपयोग करके कार्य करता है - फिर शुद्ध घटकों को लगातार प्रदान नहीं किया जाएगा। विशेष रूप से कॉलबैक कैशिंग काम में आ सकता है ताकि जब वे प्योरकॉम्पोनेंट को पास किए जाएं, तो अनावश्यक अपडेटिंग चक्र न हो।
यह मत भूलो कि आपको कॉलबैक में एक वास्तविक घटना नहीं मिलती है, लेकिन एक सिंथेटिक घटना है। यदि आप वर्तमान फ़ंक्शन से बाहर निकलते हैं, तो आप इस ईवेंट के फ़ील्ड तक नहीं पहुंच पाएंगे। यदि आपको एसिंक्रोनस क्लोजर हैं, तो उन फ़ील्ड को कैश करें जिनकी आपको आवश्यकता है।

भाग 1. घटना संचालकों, कैशिंग और कोड धारणा

HTML तत्वों के लिए ईवेंट हैंडलर जोड़ने के लिए रिएक्ट काफी सुविधाजनक तरीका प्रदान करता है।

यह उन मूल चीज़ों में से एक है जो किसी भी डेवलपर को तब पता चलती हैं जब वे रिएक्ट में लिखना शुरू करते हैं:

class MyComponent extends Component { render() { return <button onClick={() => console.log('Hello world!')}>Click me</button>; } }

काफी आसान है? इस कोड से, यह तुरंत स्पष्ट हो जाता है कि उपयोगकर्ता बटन पर क्लिक करने पर क्या होगा।

लेकिन क्या होगा यदि हैंडलर में कोड अधिक से अधिक हो जाए?

मान लीजिए कि एक बटन के द्वारा हमें उन सभी को लोड और फ़िल्टर करना होगा जो किसी विशेष टीम में नहीं हैं ( user.team === 'search-team' ), तो उन्हें उम्र के अनुसार क्रमबद्ध करें।

 class MyComponent extends Component { constructor(props) { super(props); this.state = { users: [] }; } render() { return ( <div> <ul> {this.state.users.map(user => ( <li>{user.name}</li> ))} </ul> <button onClick={() => { console.log('Hello world!'); window .fetch('/usersList') .then(result => result.json()) .then(data => { const users = data .filter(user => user.team === 'search-team') .sort((a, b) => { if (a.age > b.age) { return 1; } if (a.age < b.age) { return -1; } return 0; }); this.setState({ users: users, }); }); }} > Load users </button> </div> ); } }

यह कोड पता लगाने के लिए बहुत कठिन है। व्यापार तर्क कोड उस लेआउट के साथ मिलाया जाता है जिसे उपयोगकर्ता देखता है।

इससे छुटकारा पाने का सबसे आसान तरीका: फ़ंक्शन को क्लास के तरीकों के स्तर पर ले जाएं:

 class MyComponent extends Component { fetchUsers() { //    } render() { return ( <div> <ul> {this.state.users.map(user => ( <li>{user.name}</li> ))} </ul> <button onClick={() => this.fetchUsers()}>Load users</button> </div> ); } }

यहाँ हमने JSX कोड से व्यावसायिक तर्क को अपनी कक्षा में एक अलग क्षेत्र में स्थानांतरित कर दिया। फ़ंक्शन के अंदर इसे सुलभ बनाने के लिए, हमने कॉलबैक को इस तरह परिभाषित किया: onClick={() => this.fetchUsers()}

इसके अलावा, एक वर्ग का वर्णन करते समय, हम एक क्षेत्र को एक तीर फ़ंक्शन के रूप में घोषित कर सकते हैं:

 class MyComponent extends Component { fetchUsers = () => { //    }; render() { return ( <div> <ul> {this.state.users.map(user => ( <li>{user.name}</li> ))} </ul> <button onClick={this.fetchUsers}>Load users</button> </div> ); } }

यह हमें कॉलबैक को onClick={this.fetchUsers} रूप में घोषित करने की अनुमति देगा

इन दोनों विधियों में क्या अंतर है?

onClick={this.fetchUsers} - यहाँ, प्रॉप्स में रेंडर फंक्शन के लिए हर कॉल के साथ, button को हमेशा एक ही लिंक भेजा जाएगा।

onClick={() => this.fetchUsers()} , जब भी रेंडर फ़ंक्शन को कॉल किया जाता है, तो जावास्क्रिप्ट एक नए फ़ंक्शन () => this.fetchUsers() करता है और इसे onClick प्रोप पर सेट करता है। इसका मतलब यह है कि nextProp.onClick और prop.onClick इस मामले में button पर button हमेशा बराबर नहीं होगा, और यहां तक कि अगर घटक साफ के रूप में चिह्नित है, तो इसका प्रतिपादन किया जाएगा।

इससे विकास को क्या खतरा है?

ज्यादातर मामलों में, आप नेत्रहीन रूप से एक प्रदर्शन में कमी नहीं देखेंगे, क्योंकि घटक द्वारा उत्पन्न वर्चुअल डोम पिछले एक से अलग नहीं होगा, और आपके डोम में कोई बदलाव नहीं होगा।

हालांकि, यदि आप घटकों या तालिकाओं की बड़ी सूची प्रस्तुत करते हैं, तो आप बड़ी मात्रा में डेटा पर "ब्रेक" देखेंगे।

यह समझना महत्वपूर्ण है कि कॉलबैक में किसी फ़ंक्शन को कैसे स्थानांतरित किया जाता है?

अक्सर ट्विटर पर या स्टैकओवरफ़्लो पर आप इस तरह के सुझाव दे सकते हैं:

"यदि आपके पास प्रतिक्रिया अनुप्रयोगों के साथ प्रदर्शन के मुद्दे हैं, तो PureComponent के साथ घटक से वंशानुक्रम को बदलने का प्रयास करें। इसके अलावा, याद रखें कि घटक के लिए आप अनावश्यक अद्यतन छोरों से छुटकारा पाने के लिए हमेशा canComponentUpdate को परिभाषित कर सकते हैं।"

यदि हम एक घटक को प्योर के रूप में परिभाषित करते हैं, तो इसका मतलब है कि इसमें पहले से ही एक shouldComponentUpdate फ़ंक्शन है जो कि प्रॉप्स और नेक्स्टप्रॉप्स के बीच उथला है।

हर बार इस तरह के एक घटक के लिए एक नया कॉलबैक फ़ंक्शन पास करना, हम PureComponent सभी फायदे और अनुकूलन खो देते हैं।

आइए एक उदाहरण देखें।
एक इनपुट कंपोनेंट बनाएं, जिसमें यह अपडेट करने की जानकारी भी होगी कि इसे कितनी बार अपडेट किया गया है:

 class Input extends PureComponent { renderedCount = 0; render() { this.renderedCount++; return ( <div> <input onChange={this.props.onChange} /> <p>Input component was rerendered {this.renderedCount} times</p> </div> ); } }

आइए दो घटक बनाएं जो इनपुट को आंतरिक रूप से प्रस्तुत करेंगे:

 class A extends Component { state = { value: '' }; onChange = e => { this.setState({ value: e.target.value }); }; render() { return ( <div> <Input onChange={this.onChange} /> <p>The value is: {this.state.value} </p> </div> ); } }

और दूसरा एक:

 class B extends Component { state = { value: '' }; onChange(e) { this.setState({ value: e.target.value }); } render() { return ( <div> <Input onChange={e => this.onChange(e)} /> <p>The value is: {this.state.value} </p> </div> ); } }

आप यहाँ अपने हाथों से उदाहरण आज़मा सकते हैं: https://codesandbox.io/s/2vwz6kjjkr
यह उदाहरण दर्शाता है कि यदि आप प्रत्येक बार PureComponent में एक नया कॉलबैक फ़ंक्शन पास करते हैं तो आप PureComponent के सभी लाभों को कैसे खो सकते हैं।

भाग 2. फ़ंक्शन घटकों में ईवेंट हैंडलर का उपयोग करना

रिएक्ट (16.8) के नए संस्करण में, रिएक्ट हुक तंत्र की घोषणा की गई थी, जो आपको एक स्पष्ट जीवन चक्र के साथ पूर्ण-कार्यात्मक कार्यात्मक घटकों को लिखने की अनुमति देता है, जो लगभग सभी उपयोगकर्ता मामलों को कवर कर सकता है जो अब तक केवल कवर किए गए वर्ग हैं।

हम इनपुट घटक के साथ उदाहरण को संशोधित करते हैं ताकि सभी घटकों को एक फ़ंक्शन द्वारा दर्शाया जाए और रिएक्ट-हुक के साथ काम किया जा सके।

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

 import React, { useRef } from 'react'; export default function Input({ onChange }) { const componentRerenderedTimes = useRef(0); componentRerenderedTimes.current++; return ( <> <input onChange={onChange} /> <p>Input component was rerendered {componentRerenderedTimes.current} times</p> </> ); }

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

 import React, { useRef, memo } from 'react'; export default memo(function Input({ onChange }) { const componentRerenderedTimes = useRef(0); componentRerenderedTimes.current++; return ( <> <input onChange={onChange} /> <p>Input component was rerendered {componentRerenderedTimes.current} times</p> </> ); });

इनपुट घटक तैयार है, अब घटकों ए और बी को फिर से लिखें।
घटक बी के मामले में, यह करना आसान है:

 import React, { useState } from 'react'; function B() { const [value, setValue] = useState(''); return ( <div> <Input onChange={e => setValue(e.target.value)} /> <p>The value is: {value} </p> </div> ); }

यहां हमने useState हुक का उपयोग किया है, जो आपको घटक की स्थिति के साथ सहेजने और काम करने की अनुमति देता है, यदि घटक एक फ़ंक्शन द्वारा दर्शाया जाता है।

हम कॉलबैक फ़ंक्शन को कैश कैसे कर सकते हैं? हम इसे घटक से नहीं निकाल सकते, क्योंकि इस मामले में यह घटक के विभिन्न उदाहरणों के लिए सामान्य होगा।
इस तरह के कार्यों के लिए, रिएक्ट में कैशिंग और useCallback हुक का एक सेट होता है, जिनमें से useCallback हमारे लिए सबसे उपयुक्त useCallback https://reactjs.org/docs/hooks-reference.html

इस हुक को कंपोनेंट A जोड़ें:

 import React, { useState, useCallback } from 'react'; function A() { const [value, setValue] = useState(''); const onChange = useCallback(e => setValue(e.target.value), []); return ( <div> <Input onChange={onChange} /> <p>The value is: {value} </p> </div> ); }

हमने फ़ंक्शन को कैश किया, जिसका अर्थ है कि इनपुट घटक हर बार अपडेट नहीं किया जाएगा।

कैसे उपयोग करता है useCallback हुक काम करता है?

यह हुक एक कैश्ड फंक्शन लौटाता है (यानी लिंक रेंडर से रेंडर में नहीं बदलता)।
कैश किए जाने वाले फ़ंक्शन के अलावा, एक दूसरा तर्क इसे पास किया जाता है - एक खाली सरणी।
यह सरणी आपको फ़ील्ड की एक सूची हस्तांतरित करने की अनुमति देती है, जिसे बदलते समय आपको फ़ंक्शन को बदलने की आवश्यकता होती है, अर्थात। एक नया लिंक लौटाएं।

useCallback किसी फ़ंक्शन को कॉलबैक और useCallback करने की सामान्य विधि के बीच अंतर देख सकते हैं: यहाँ पर useCallback करें: https://codesandbox.io/s/0y7wm3pp1w

हमें एक सरणी की आवश्यकता क्यों है?

मान लें कि हमें एक फ़ंक्शन को कैश करना होगा जो एक क्लोजर के माध्यम से कुछ मूल्य पर निर्भर करता है:

 import React, { useCallback } from 'react'; import ReactDOM from 'react-dom'; import './styles.css'; function App({ a, text }) { const onClick = useCallback(e => alert(a), [ /*a*/ ]); return <button onClick={onClick}>{text}</button>; } const rootElement = document.getElementById('root'); ReactDOM.render(<App text={'Click me'} a={1} />, rootElement);

यहाँ, एप घटक प्रोप पर निर्भर करता a । यदि आप उदाहरण चलाते हैं, तो सब कुछ सही ढंग से काम करेगा जब तक कि हम अंत तक नहीं जोड़ते हैं:

 setTimeout(() => ReactDOM.render(<App text={'Next A'} a={2} />, rootElement), 5000);

टाइमआउट शुरू होने के बाद, जब आप अलर्ट में बटन पर क्लिक करते हैं, तो 1 प्रदर्शित होगा। ऐसा इसलिए होता है क्योंकि हमने पिछले फ़ंक्शन को सहेज लिया है, जिसने a चर को बंद कर दिया a । और चूंकि a चर है, जो हमारे मामले में एक मूल्य प्रकार है, और मूल्य प्रकार अपरिवर्तनीय है, हमें यह त्रुटि मिली। यदि हम टिप्पणी /*a*/ हटाते हैं, तो कोड सही ढंग से काम करेगा। दूसरे रेंडर पर प्रतिक्रिया सत्यापित करेगी कि सरणी में पास किया गया डेटा अलग है और एक नया फ़ंक्शन लौटाएगा।

आप यहाँ इस उदाहरण को स्वयं आज़मा सकते हैं: https://codesandbox.io/s/6vo8jny1ln

रिएक्ट कई कार्य प्रदान करता है जो आपको डेटा को याद रखने की अनुमति देता है, जैसे useRef , useCallback और useMemo ।
यदि फ़ंक्शन मान को याद रखने के लिए बाद की आवश्यकता होती है, और वे उपयोग करने के useCallback काफी समान useCallback , तो फिर useRef आपको न केवल DOM तत्वों के संदर्भों को कैश करने की अनुमति देता है, बल्कि एक उदाहरण क्षेत्र के रूप में भी कार्य करता है।

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

https://codesandbox.io/s/p70pprpvvx यहां आप सही useCallback साथ कार्यों के useCallback को देख सकते हैं, गलत के साथ और उपयोग के साथ।

भाग 3. सिन्थेटिक घटनाएँ

हमने पहले ही यह पता लगा लिया है कि इवेंट हैंडलर का उपयोग कैसे करें और कॉलबैक में क्लोजर के साथ सही तरीके से कैसे काम करें, लेकिन प्रतिक्रिया में उनके साथ काम करते समय एक और बहुत महत्वपूर्ण अंतर है:

नोट: अब Input , जिसके साथ हमने ऊपर काम किया, वह पूरी तरह से सिंक्रोनस है, लेकिन कुछ मामलों में कॉलबैक के लिए विलंब या थ्रॉटलिंग पैटर्न के अनुसार देरी के साथ यह आवश्यक हो सकता है। इसलिए, उदाहरण के लिए, बहस, खोज स्ट्रिंग इनपुट के लिए उपयोग करने के लिए बहुत सुविधाजनक है - खोज केवल तब होगी जब उपयोगकर्ता टाइपिंग वर्ण बंद कर देगा।

एक घटक बनाएं जो आंतरिक रूप से एक राज्य परिवर्तन का कारण बनता है:

 function SearchInput() { const [value, setValue] = useState(''); const timerHandler = useRef(); return ( <> <input defaultValue={value} onChange={e => { clearTimeout(timerHandler.current); timerHandler.current = setTimeout(() => { setValue(e.target.value); }, 300); // wait, if user is still writing his query }} /> <p>Search value is {value}</p> </> ); }

यह कोड काम नहीं करेगा। तथ्य यह है कि रिएक्ट घटनाओं को अपने अंदर सम्‍मिलित करता है, और तथाकथित सिंथेटिक घटना हमारे ऑनकॉन्ग कॉलबैक में हो जाती है, जो कि हमारे कार्य के बाद "क्लियर" होगी (फ़ील्ड रिक्त होगी)। प्रदर्शन कारणों से, रिएक्ट हर बार एक नया बनाने के बजाय एक ही वस्तु का उपयोग करने के लिए करता है।

अगर हमें इस उदाहरण में मान लेने की आवश्यकता है, तो यह आवश्यक है कि फ़ंक्शन से बाहर निकलने के लिए आवश्यक फ़ील्ड को कैश करें:

 function SearchInput() { const [value, setValue] = useState(''); const timerHandler = useRef(); return ( <> <input defaultValue={value} onChange={e => { clearTimeout(timerHandler.current); const pendingValue = e.target.value; // cached! timerHandler.current = setTimeout(() => { setValue(pendingValue); }, 300); // wait, if user is still writing his query }} /> <p>Search value is {value}</p> </> ); }

आप यहां एक उदाहरण देख सकते हैं: https://codesandbox.io/s/oj6p8opq0z

बहुत ही दुर्लभ मामलों में, घटना के पूरे उदाहरण को बनाए रखना आवश्यक हो जाता है। ऐसा करने के लिए, आप event.persist() कॉल कर सकते हैं, जो निकालता है
प्रतिक्रिया की घटनाओं के घटना-पूल से सिंथेटिक घटना का यह उदाहरण।

निष्कर्ष:

रिएक्ट इवेंट हैंडलर बहुत सुविधाजनक हैं क्योंकि वे:

स्वचालित सदस्यता और सदस्यता रद्द करें (अनमाउंट घटक के साथ);
कोड की धारणा को सरल बनाएं, अधिकांश सदस्यता जेएसएक्स कोड में ट्रैक करना आसान है।

लेकिन एक ही समय में, अनुप्रयोग विकसित करते समय, आपको कुछ कठिनाइयों का सामना करना पड़ सकता है:

प्रॉप्स में ओवरराइडिंग कॉलबैक;
सिंथेटिक फ़ंक्शन जो वर्तमान फ़ंक्शन के निष्पादन के बाद साफ़ हो जाते हैं।

ओवरराइडिंग कॉलबैक आमतौर पर ध्यान देने योग्य नहीं है, क्योंकि vDOM नहीं बदलता है, लेकिन यह याद रखने योग्य है कि यदि आप अनुकूलन शुरू करते हैं, तो PureComponent से इनहेरिटेंस के माध्यम से PureComponent या memo का उपयोग करते हुए, आपको उन्हें कैशिंग करने से PureComponent चाहिए, अन्यथा प्योरकॉमर्स या मेमो शुरू करने के लाभ ध्यान देने योग्य नहीं होंगे। कैशिंग के लिए, आप या तो classProperties (वर्ग के साथ काम करते समय) का उपयोग कर सकते हैं या useCallback हुक का उपयोग कर सकते हैं (जब कार्यों के साथ काम कर रहे हों)।

सही अतुल्यकालिक ऑपरेशन के लिए, यदि आपको किसी घटना से डेटा की आवश्यकता है, तो उन फ़ील्ड को भी कैश करें जिनकी आपको ज़रूरत है।

रिएक्ट में कॉलबैक के साथ काम करना

टीएल, डॉ

भाग 1. घटना संचालकों, कैशिंग और कोड धारणा

भाग 2. फ़ंक्शन घटकों में ईवेंट हैंडलर का उपयोग करना

भाग 3. सिन्थेटिक घटनाएँ

निष्कर्ष:

More articles: