रिएक्ट कंपोनेंट को अपडेट करने के लिए कैसे बाध्य करें

परिचय

इस लेख में हम आपको दिखाएंगे कि कैसे React.js में एक घटक को अद्यतन करने के लिए बाध्य किया जाए। अधिक विशेष रूप से, हम रिएक्ट री-रेंडर का एक संक्षिप्त परिचय देंगे, हम दिखाएंगे कि क्लास-आधारित घटकों में अपडेट को कैसे बाध्य किया जाए, और कार्यात्मक घटकों में अपडेट को कैसे बाध्य किया जाए।

रिएक्ट री-रेंडर्स

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

आइए एक नज़र डालते हैं कि रिएक्ट घटक पर इस मजबूर अद्यतन का उपयोग कैसे करें। इसे दिखाने के लिए, हम डेमो उद्देश्यों के लिए एक सरल एप्लिकेशन बनाने जा रहे हैं।

नोट: हम रिएक्ट की कुछ अवधारणाओं को शामिल करेंगे, इसलिए रिएक्ट का बुनियादी ज्ञान होना उचित है।

कक्षा-आधारित घटकों पर अद्यतनों को बाध्य करना

क्लास कंपोनेंट में कंपोनेंट को फिर से रेंडर करने के लिए एक बिल्ट-इन मेथड होता है, जिसे कहा जाता है forceUpdate(), जिसका उपयोग किसी घटक को फिर से प्रस्तुत करने के लिए बाध्य करने के लिए किया जाता है। आप के बारे में और अधिक पढ़ सकते हैं forceUpdate() रिएक्ट पर विधि सरकारी वेबसाइट.

handleForceupdateMethod() {
    
    this.forceUpdate();
}

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

यहां एक उदाहरण दिया गया है कि किसी वर्ग-आधारित घटक पर अद्यतन को कैसे बाध्य किया जाए:

import React from 'react'

class App extends React.Component {
    constructor() {
        super();
        this.handleForceupdateMethod = this.handleForceupdateMethod.bind(this);
    };

    handleForceupdateMethod() {
        this.forceUpdate();
    };

    render() {
        return (
            <div>
                <h1>Hello StackAbuse</h1>
                <h3>Random Number: { Math.random() }</h3>
                <button onClick={this.handleForceupdateMethod}>
                    Force re-render
                </button>
            </div>
        );
    }
}

export default App

इस पद्धति के भीतर जितना लगता है, उससे कहीं अधिक चल रहा है। उदाहरण के लिए, कॉलिंग forceUpdate() बाल घटकों के लिए जीवनचक्र विधियों को भी ट्रिगर करता है। और जैसा कि हम रिएक्ट के साथ जानते हैं, यह DOM को तभी अपडेट करेगा जब मार्कअप वास्तव में बदल गया हो।

आप इन तक पहुंच सकते हैं लाइव कोड यहाँ.

कार्यात्मक घटकों पर अद्यतनों को बाध्य करना

कार्यात्मक घटकों में उनके वर्ग-आधारित समकक्षों की तरह घटकों को फिर से प्रस्तुत करने के लिए कोई अंतर्निहित विधि नहीं है। इसका मतलब है कि हमारे पास नहीं है forceUpdate() हमारे लिए उपलब्ध विधि। हालाँकि, याद रखें कि रिएक्ट घटकों में आमतौर पर राज्य या प्रोप परिवर्तनों के कारण फिर से प्रस्तुत किया जाता है। इसका उपयोग करके, हम बलपूर्वक ऊपर उठने के तरीकों को प्राप्त कर सकते हैं।

V16.8+ के रूप में, रिएक्ट में हुक नामक एक अवधारणा है जिसका उपयोग राज्य को अद्यतन करने, साइड-इफेक्ट्स करने आदि के लिए कार्यात्मक घटकों में किया जा सकता है। हम इन हुक का उपयोग फिर से प्रस्तुत करने के लिए एक घटक प्राप्त करने में अपने लाभ के लिए करेंगे।

कार्यात्मक घटक में अद्यतन को बाध्य करने के कुछ उदाहरण यहां दिए गए हैं:

ऊपर दिए useReducer हुक

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

रिएक्ट में एक रिड्यूसर का उपयोग आमतौर पर तब किया जाता है जब आपके पास जटिल स्थिति तर्क और क्रियाएं होती हैं। यहां हम इसका उपयोग केवल डमी स्टेट वेरिएबल को अपडेट करके अपडेट को ट्रिगर करने के लिए करते हैं, x. अद्यतन को ट्रिगर करने के लिए राज्य को वास्तव में बदलना चाहिए, यही कारण है कि यह प्रत्येक कॉल पर बढ़ता है।

उपयोग useState हुक

import React, { useState } from "react";


function useForceUpdate() {
    let [value, setState] = useState(true);
    return () => setState(!value);
}

export default function App() {
    
    const handleForceupdateMethod = useForceUpdate();

    return (
        <div className="App">
            <h1>Hello StackAbuse </h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

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

ऊपर दिए useState और useCallback हुक

import React, { useState , useCallback} from "react";

export default function App() {
    const [, updateState] = useState();
    const handleForceupdateMethod = useCallback(() => updateState({}), []);

    
    console.log("Rendering...");

    return (
        <div className="App">
            <h1>Hello StackAbuse</h1>
            <h3>Random Number: { Math.random() }</h3>

            {/*
                Clicking on the button will force to re-render like force update does
            */}
            <button onClick={handleForceupdateMethod}>Force re-render</button>
        </div>
    );
}

फिर से, यह रणनीति राज्य को बदलकर काम करती है। इस मामले में, हालांकि हम तकनीकी रूप से नहीं बदल रहे हैं मूल्य राज्य के, हम रहे इसे एक नई वस्तु भेजना, जिसे रिएक्ट द्वारा नया माना जाता है क्योंकि यह राज्य पर "गहरी" समानता जांच नहीं करता है।

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

निष्कर्ष

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