रिएक्ट हुक, एचओसी या रेंडर प्रोप के साथ एपीआई अनुरोध

आइए नए दोस्त रिएक्ट हुक और अच्छे पुराने दोस्तों रेंडर प्रोप और एचओसी (उच्च आदेश घटक) का उपयोग करके एपीआई के लिए डेटा अनुरोध के कार्यान्वयन पर विचार करें। पता करें कि क्या कोई नया दोस्त वास्तव में पुराने दो से बेहतर है।

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

रिएक्ट हुक अंततः एचओसी और रेंडर प्रोप जैसे पैटर्न को छोड़ना संभव बनाते हैं। क्योंकि उपयोग के दौरान, उनके खिलाफ कई दावे जमा हुए हैं:

निराधार नहीं होने के क्रम में, आइए एक उदाहरण देखें कि रिएक्ट हुक बेहतर कैसे (या शायद बदतर) रेंडर प्रोप है। हम Render Prop पर विचार करेंगे, HOC पर नहीं, क्योंकि कार्यान्वयन में वे बहुत समान हैं और HOC में अधिक कमियां हैं। आइए एक उपयोगिता लिखने की कोशिश करें जो एपीआई के लिए डेटा अनुरोध को संसाधित करता है। मुझे यकीन है कि कई ने अपने जीवन में सैकड़ों बार लिखा है, ठीक है, आइए देखें कि क्या यह बेहतर और आसान है।

इसके लिए हम लोकप्रिय अक्षीय पुस्तकालय का उपयोग करेंगे। सबसे सरल परिदृश्य में, आपको निम्नलिखित राज्यों को संसाधित करने की आवश्यकता है:

• डाटा अधिग्रहण की प्रक्रिया (isFetching)
• डेटा सफलतापूर्वक प्राप्त हुआ (responseData)
• डेटा प्राप्त करने में त्रुटि (त्रुटि)
• अनुरोध को रद्द करने, यदि इसके निष्पादन के दौरान अनुरोध पैरामीटर बदल गए हैं, और एक नया
• यदि यह घटक DOM में नहीं है, तो एक अनुरोध रद्द करना

1. सरल परिदृश्य

हम डिफ़ॉल्ट स्थिति और एक फ़ंक्शन (रिड्यूसर) लिखेंगे जो अनुरोध के परिणाम के आधार पर स्थिति को बदलता है: सफलता / त्रुटि।

const defaultState = { responseData: null, isFetching: true, error: null }; function reducer1(state, action) { switch (action.type) { case "fetched": return { ...state, isFetching: false, responseData: action.payload }; case "error": return { ...state, isFetching: false, error: action.payload }; default: return state; } } 

हम दो दृष्टिकोणों में इस फ़ंक्शन का पुन: उपयोग करते हैं।

रेंडर प्रॉप

 class RenderProp1 extends React.Component { state = defaultState; axiosSource = null; tryToCancel() { if (this.axiosSource) { this.axiosSource.cancel(); } } dispatch(action) { this.setState(prevState => reducer(prevState, action)); } fetch = () => { this.tryToCancel(); this.axiosSource = axios.CancelToken.source(); axios .get(this.props.url, { cancelToken: this.axiosSource.token }) .then(response => { this.dispatch({ type: "fetched", payload: response.data }); }) .catch(error => { this.dispatch({ type: "error", payload: error }); }); }; componentDidMount() { this.fetch(); } componentDidUpdate(prevProps) { if (prevProps.url !== this.props.url) { this.fetch(); } } componentWillUnmount() { this.tryToCancel(); } render() { return this.props.children(this.state); } 

रिएक्ट करें

 const useRequest1 = url => { const [state, dispatch] = React.useReducer(reducer, defaultState); React.useEffect(() => { const source = axios.CancelToken.source(); axios .get(url, { cancelToken: source.token }) .then(response => { dispatch({ type: "fetched", payload: response.data }); }) .catch(error => { dispatch({ type: "error", payload: error }); }); return source.cancel; }, [url]); return [state]; }; 

यूआरएल द्वारा, उपयोग किए गए घटक से, हमें डेटा मिलता है - axios.get ()। हम प्रेषण और कार्रवाई के माध्यम से सफलता और त्रुटि, बदलते राज्य को संसाधित करते हैं। घटक को राज्य वापस करें। और आग्रह को रद्द करने के लिए मत भूलना अगर यूआरएल बदल जाता है या यदि घटक को डोम से हटा दिया जाता है। यह सरल है, लेकिन आप विभिन्न तरीकों से लिख सकते हैं। हम दो दृष्टिकोणों के पेशेवरों और विपक्षों पर प्रकाश डालते हैं:

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

जब घटक जीवन चक्रों के नाम होते हैं, तो सब कुछ बहुत स्पष्ट होता है। स्क्रीन पर कंपोनेंट दिखाई देने के बाद सबसे पहले हम डेटा प्राप्त करते हैं (कंपोनेंटडिमाउंट), फिर हम इसे फिर से प्राप्त करते हैं यदि प्रॉपर.सुरल बदल गया है और इससे पहले हम पिछले अनुरोध को रद्द नहीं करते हैं (घटकडिपडेट), अगर घटक को डोम से हटा दिया गया है, तो अनुरोध (कंपोनेंटव्यूलेनटाउन) रद्द कर दें। ।

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

लेकिन हमें प्रत्येक रेंडर के बाद की जरूरत नहीं है, लेकिन केवल पहले रेंडर पर और url बदलने के मामले में, जिसे हम उपयोग करने के लिए दूसरे तर्क के रूप में इंगित करते हैं।

रिएक्ट हुक के साथ हमारी उपयोगिता का उपयोग करना भी अधिक सुविधाजनक है।

 const AvatarRenderProp1 = ({ username }) => ( <RenderProp url={`https://api.github.com/users/${username}`}> {state => { if (state.isFetching) { return "Loading"; } if (state.error) { return "Error"; } return <img src={state.responseData.avatar_url} alt="avatar" />; }} </RenderProp> ); 

 const AvatarWithHook1 = ({ username }) => { const [state] = useRequest(`https://api.github.com/users/${username}`); if (state.isFetching) { return "Loading"; } if (state.error) { return "Error"; } return <img src={state.responseData.avatar_url} alt="avatar" />; }; 

रिएक्ट हुक विकल्प फिर से अधिक कॉम्पैक्ट और स्पष्ट दिखता है।

विपक्ष रेंडर प्रोप:

1) यह स्पष्ट नहीं है कि लेआउट जोड़ा जाता है या केवल तर्क
2) यदि आपको राज्य को स्थानीय राज्य में या बाल घटक के जीवन चक्र में संसाधित करने की आवश्यकता है, तो आपको एक नया घटक बनाना होगा

एक नई कार्यक्षमता जोड़ें - उपयोगकर्ता कार्रवाई द्वारा नए मापदंडों के साथ डेटा प्राप्त करना। मैं चाहता था, उदाहरण के लिए, एक बटन जिसे आपके पसंदीदा डेवलपर का अवतार मिलता है।

2) अद्यतन उपयोगकर्ता कार्रवाई डेटा

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

हम इसे इस तरह उपयोग करेंगे:

 const Avatar2 = ({ username }) => { ... <button onClick={() => update("https://api.github.com/users/NewUsername")} > Update avatar for New Username </button> ... }; 

चलो एक कार्यान्वयन लिखें। नीचे मूल संस्करण की तुलना में केवल परिवर्तन लिखे गए हैं।

 function reducer2(state, action) { switch (action.type) { ... case "update url": return { ...state, isFetching: true, url: action.payload, defaultUrl: action.payload }; case "update url manually": return { ...state, isFetching: true, url: action.payload, defaultUrl: state.defaultUrl }; ... } } 

रेंडर प्रॉप

 class RenderProp2 extends React.Component { state = { responseData: null, url: this.props.url, defaultUrl: this.props.url, isFetching: true, error: null }; static getDerivedStateFromProps(props, state) { if (state.defaultUrl !== props.url) { return reducer(state, { type: "update url", payload: props.url }); } return null; } ... componentDidUpdate(prevProps, prevState) { if (prevState.url !== this.state.url) { this.fetch(); } } ... update = url => { this.dispatch({ type: "update url manually", payload: url }); }; render() { return this.props.children(this.state, this.update); } } 

रिएक्ट करें

 const useRequest2 = url => { const [state, dispatch] = React.useReducer(reducer, { url, defaultUrl: url, responseData: null, isFetching: true, error: null }); if (url !== state.defaultUrl) { dispatch({ type: "update url", payload: url }); } React.useEffect(() => { …(fetch data); }, [state.url]); const update = React.useCallback( url => { dispatch({ type: "update url manually", payload: url }); }, [dispatch] ); return [state, update]; }; 

यदि आपने ध्यान से कोड को देखा, तो आपने देखा:

• url हमारी उपयोगिता के अंदर संग्रहीत किया जाने लगा;
• defaultUrl पहचान करने के लिए दिखाई दिया कि यूआरएल को प्रॉपर के माध्यम से अपडेट किया गया था। हमें props.url के परिवर्तन की निगरानी करने की आवश्यकता है, अन्यथा एक नया अनुरोध नहीं भेजा जाएगा;
• अपडेट फ़ंक्शन को जोड़ा, जिसे हम बटन पर क्लिक करके एक नया अनुरोध भेजने के लिए घटक पर लौटते हैं।

रेंडर प्रोप के साथ ध्यान दें कि हमें स्थानीय राज्य का अद्यतन करने के लिए getDerivedStateFromProps का उपयोग करना होगा। और रिएक्ट हुक के साथ कोई नया अमूर्त नहीं है, आप तुरंत रेंडर में राज्य अपडेट को कॉल कर सकते हैं - हुर्रे, कॉमरेड्स, आखिरकार!

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

3) एक ही अंतराल या मतदान पर एपीआई मतदान

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

का उपयोग करें:

 const AvatarRenderProp3 = ({ username }) => ( <RenderProp url={`https://api.github.com/users/${username}`} pollInterval={1000}> ... 

 const AvatarWithHook3 = ({ username }) => { const [state, update] = useRequest( `https://api.github.com/users/${username}`, 1000 ); ... 

कार्यान्वयन:

 function reducer3(state, action) { switch (action.type) { ... case "poll": return { ...state, requestId: state.requestId + 1, isFetching: true }; ... } } 

रेंडर प्रॉप

 class RenderProp3 extends React.Component { state = { ... requestId: 1, } ... timeoutId = null; ... tryToClearTimeout() { if (this.timeoutId) { clearTimeout(this.timeoutId); } } poll = () => { this.tryToClearTimeout(); this.timeoutId = setTimeout(() => { this.dispatch({ type: 'poll' }); }, this.props.pollInterval); }; ... componentDidUpdate(prevProps, prevState) { ... if (this.props.pollInterval) { if ( prevState.isFetching !== this.state.isFetching && !this.state.isFetching ) { this.poll(); } if (prevState.requestId !== this.state.requestId) { this.fetch(); } } } componentWillUnmount() { ... this.tryToClearTimeout(); } ... 

रिएक्ट करें

 const useRequest3 = (url, pollInterval) => { const [state, dispatch] = React.useReducer(reducer, { ... requestId: 1, }); React.useEffect(() => { …(fetch data) }, [state.url, state.requestId]); React.useEffect(() => { if (!pollInterval || state.isFetching) return; const timeoutId = setTimeout(() => { dispatch({ type: "poll" }); }, pollInterval); return () => { clearTimeout(timeoutId); }; }, [pollInterval, state.isFetching]); ... } 

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

रेंडर प्रोप में, मुझे लिखना था:

1. पिछले और नए requestId और isFetching मूल्यों की तुलना करना
2. दो समय में स्पष्ट मध्यांतर
3. वर्ग में टाइमआउट आईडी जोड़ें

रिएक्ट हुक आपको संक्षेप में और स्पष्ट रूप से लिखने की अनुमति देते हैं जो हम अधिक विस्तार से वर्णन करते थे और हमेशा स्पष्ट नहीं होते हैं।

4) आगे क्या?
हम अपनी उपयोगिता की कार्यक्षमता का विस्तार करना जारी रख सकते हैं: क्वेरी मापदंडों के विभिन्न विन्यासों को स्वीकार करना, डेटा को कैशिंग करना, प्रतिक्रिया और त्रुटियों को परिवर्तित करना, किसी भी बड़े वेब अनुप्रयोग में समान मापदंडों के साथ डेटा को जबरन अपडेट करना। हमारी परियोजना पर, हमने बहुत पहले इसे एक अलग (ध्यान!) घटक में निकाल लिया है। हां, क्योंकि यह एक रेंडर प्रोप था। लेकिन हुक जारी करने के साथ, हम फ़ंक्शन (यूएक्सऑक्सऑर्गेस्टेस्ट) को फिर से लिखते हैं और यहां तक ​​कि पुराने कार्यान्वयन में कुछ बग भी पाए गए हैं। आप यहां देख सकते हैं और प्रयास कर सकते हैं।