प्रतिक्रियाशील हुक के साथ कार्यात्मक घटक। यह बेहतर क्यों है?

जब React.js 16.8 जारी किया गया तो हमें रिएक्ट हुक का उपयोग करने का अवसर मिला। हुक हमें कार्यों का उपयोग करके पूरी तरह से कार्यात्मक घटकों को लिखने में सक्षम बनाते हैं। हम सभी React.js सुविधाओं का उपयोग कर सकते हैं और अधिक सुविधाजनक तरीके से कर सकते हैं।

बहुत सारे लोग हुक गर्भाधान से सहमत नहीं हैं। इस लेख में मैं कुछ महत्वपूर्ण फायदों के बारे में बताना चाहूंगा जो रिएक्ट हुक आपको देते हैं और हमें हुक के साथ लिखने की आवश्यकता क्यों है।

मैं हुक का उपयोग करने के बारे में बात नहीं करूंगा। यह उदाहरणों के लिए बहुत महत्वपूर्ण नहीं है। यदि आप इस विषय पर कुछ पढ़ना चाहते हैं, तो आप आधिकारिक दस्तावेज का उपयोग कर सकते हैं। इसके अलावा, अगर यह विषय आपके लिए दिलचस्प होगा, तो मैं हुक के बारे में अधिक लिखूंगा।

हुक हमें आसानी से हमारे कोड का पुन: उपयोग करने की अनुमति देते हैं

आइए एक सरल रूप प्रदान करने वाले घटक की कल्पना करें। यह हमें कुछ इनपुट दिखा रहा है और हमें यह मान बदलने के लिए अनुमति दे सकता है।

वर्ग संकेतन के साथ, कुछ इस तरह होगा:

class Form extends React.Component { state = { // Fields values fields: {}, }; render() { return ( <form> {/* Inputs render */} </form> ); }; } 

आइए अब कल्पना करें कि जब भी हम बदले, हम अपने खेतों के मूल्यों को एक बैकएंड पर स्वचालित रूप से सहेजना चाहते हैं। मैं बाहरी कार्यों जैसे कि shallowEqual - shallowEqual और shallowEqual की परिभाषा को छोड़ने का सुझाव देता हूं।

 class Form extends React.Component { constructor(props) { super(props); this.saveToDraft = debounce(500, this.saveToDraft); }; state = { // Fields values fields: {}, // Draft saving meta draft: { isSaving: false, lastSaved: null, }, }; saveToDraft = (data) => { if (this.state.isSaving) { return; } this.setState({ isSaving: true, }); makeSomeAPICall().then(() => { this.setState({ isSaving: false, lastSaved: new Date(), }) }); } componentDidUpdate(prevProps, prevState) { if (!shallowEqual(prevState.fields, this.state.fields)) { this.saveToDraft(this.state.fields); } } render() { return ( <form> {/* Draft saving meta render */} {/* Inputs render */} </form> ); }; } 

हुक के साथ एक ही घटक:

 const Form = () => { // Our state const [fields, setFields] = useState({}); const [draftIsSaving, setDraftIsSaving] = useState(false); const [draftLastSaved, setDraftLastSaved] = useState(false); useEffect(() => { const id = setTimeout(() => { if (draftIsSaving) { return; } setDraftIsSaving(true); makeSomeAPICall().then(() => { setDraftIsSaving(false); setDraftLastSaved(new Date()); }); }, 500); return () => clearTimeout(id); }, [fields]); return ( <form> {/* Draft saving meta render */} {/* Inputs render */} </form> ); } 

जैसा कि हम देखते हैं, यहां कोई बड़ा अंतर नहीं है। हमने this.state किया। useState this.state को useState हुक और मसौदा को अब useEffect हुक में useEffect ।

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

 // useDraft hook can be used in any other component const useDraft = (fields) => { const [draftIsSaving, setDraftIsSaving] = useState(false); const [draftLastSaved, setDraftLastSaved] = useState(false); useEffect(() => { const id = setTimeout(() => { if (draftIsSaving) { return; } setDraftIsSaving(true); makeSomeAPICall().then(() => { setDraftIsSaving(false); setDraftLastSaved(new Date()); }); }, 500); return () => clearTimeout(id); }, [fields]); return [draftIsSaving, draftLastSaved]; } const Form = () => { // Our state const [fields, setFields] = useState({}); const [draftIsSaving, draftLastSaved] = useDraft(fields); return ( <form> {/* Draft saving meta render */} {/* Inputs render */} </form> ); } 

और हम अन्य घटकों में useDraft हुक का उपयोग कर सकते हैं! बेशक, यह एक बहुत ही सरल उदाहरण है, लेकिन कोड का पुन: उपयोग करना बहुत महत्वपूर्ण है और उदाहरण से पता चलता है कि हुक के साथ यह कितना आसान है।

हुक हमें अधिक सहज तरीके से घटक लिखने की अनुमति देते हैं

चलो एक वर्ग घटक प्रतिपादन की कल्पना करते हैं, उदाहरण के लिए, एक चैट स्क्रीन, चैट सूची और संदेश फ़ॉर्म। इस तरह:

 class ChatApp extends React.Component { state = { currentChat: null, }; handleSubmit = (messageData) => { makeSomeAPICall(SEND_URL, messageData) .then(() => { alert(`Message is sent to chat ${this.state.currentChat}`); }); }; render() { return ( <Fragment> <ChatsList changeChat={currentChat => { this.setState({ currentChat }); }} /> <CurrentChat id={currentChat} /> <MessageForm onSubmit={this.handleSubmit} /> </Fragment> ); }; } 

फिर इस चैट घटक का उपयोग करके हमारे उपयोगकर्ता की कल्पना करें:

• वे चैट 1 खोलते हैं
• वे एक संदेश भेजते हैं (चलो कुछ धीमे नेटवर्क की कल्पना करते हैं)
• वे चैट 2 खोलते हैं
• वे अपने संदेश के बारे में अलर्ट देखते हैं:
  
  • "संदेश चैट 2 में भेजा गया है"

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

दूसरे हाथ में, कार्यात्मक घटक दूसरे तरीके से कार्य करते हैं:

 const ChatApp = () => { const [currentChat, setCurrentChat] = useState(null); const handleSubmit = useCallback( (messageData) => { makeSomeAPICall(SEND_URL, messageData) .then(() => { alert(`Message is sent to chat ${currentChat}`); }); }, [currentChat] ); render() { return ( <Fragment> <ChatsList changeChat={setCurrentChat} /> <CurrentChat id={currentChat} /> <MessageForm onSubmit={handleSubmit} /> </Fragment> ); }; } 

आइए हमारे उपयोगकर्ता की कल्पना करें:

• वे चैट 1 खोलते हैं
• वे एक संदेश भेजते हैं (चलो कुछ धीमे नेटवर्क की कल्पना करते हैं)
• वे चैट 2 खोलते हैं
• वे अपने संदेश के बारे में अलर्ट देखते हैं:
  
  • "संदेश चैट 1 में भेजा गया है"

खैर, क्या बदला है? अब हम एक मूल्य के साथ काम कर रहे हैं, रेंडर पल में कैप्चर किया गया है। हम एक नया handleSubmit बना रहे हैं, जब भी currentChat handleSubmit हर बार currentChat । यह हमें भविष्य के बदलावों के बारे में भूल जाने और अभी के बारे में सोचने की अनुमति देता है।

हर घटक अपने उपयोग की हर चीज पर कब्जा कर लेता है ।

हुक घटकों को जीवनचक्र बना देते हैं

यह कारण पिछले वाले के साथ दृढ़ता से प्रतिच्छेद करता है। रिएक्ट एक घोषित यूआई लाइब्रेरी है। विकृतीकरण UI बनाने और प्रक्रिया को और अधिक आसान बनाता है। यह हमें अनिवार्य डोम परिवर्तन के बारे में भूलने की अनुमति देता है।

फिर भी, जब हम कक्षाओं का उपयोग करते हैं, तो हम जीवन चक्र के घटकों का सामना करते हैं। यह इस तरह दिखता है:

• बढ़ते
• अद्यतन करना (जब भी state या props बदले गए)
• अनमाउंट

यह आश्वस्त लगता है लेकिन मुझे विश्वास है कि यह केवल हमारी आदतों के कारण है। यह रिएक्ट की तरह नहीं है।

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

पहली बार में useEffect हुक, componentDidUpdate , componentDidUpdate और अन्य जीवनचक्र विधियों के प्रतिस्थापन की तरह लगता है। लेकिन यह ऐसा नहीं है। जब हम उपयोग का उपयोग useEffect तो हमने प्रतिक्रिया के लिए कहा: "अरे, मेरे घटक को प्रस्तुत करने के बाद इसे बनाएं"।

उपयोग के बारे में बड़े लेख का एक अच्छा उदाहरण यहाँ दिया गया है:

• प्रतिक्रिया: मुझे यूआई दें जब राज्य 0 ।
• आपका घटक:
  
  • यहाँ रेंडर रिजल्ट है: <p>You clicked 0 times</p> ।
  • अपने द्वारा किए जाने के बाद इस प्रभाव को चलाना भी याद रखें: () => { document.title = 'You clicked 0 times' } ।
• प्रतिक्रिया: ज़रूर यूआई को अपडेट करना। अरे ब्राउज़र, मैं कुछ सामान डोम में जोड़ रहा हूँ।
• ब्राउज़र: कूल, मैंने इसे स्क्रीन पर चित्रित किया।
• प्रतिक्रिया: ठीक है, अब मैं आपके द्वारा दिए गए प्रभाव को चलाने जा रहा हूँ।
  
  • रनिंग () => { document.title = 'You clicked 0 times' } ।

यह अधिक घोषणापत्र है, है ना?

समापन में

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

खैर, हमें यह सीखने की ज़रूरत है कि इसका उपयोग कैसे किया जाए, लेकिन हे, क्या आपने पहली बार एक कक्षा के घटकों को ठीक से लिखा था?