javascript - केवल एक बार रिएक्ट के उपयोग के साथ लोडिंग फ़ंक्शन को कैसे कॉल करें




reactjs react-hooks (3)

कस्टम का उपयोग करें हुक

कंपोनेंट माउंट के बाद ही कोई फंक्शन चलाना एक सामान्य पैटर्न है, और यह एक हुक को सही ठहराता है जो कार्यान्वयन विवरण को छुपाता है।

const useMountEffect = (fun) => useEffect(fun, [])

फिर इसे अपने कोड में कहीं भी उपयोग करें।

function MyComponent() {
    useMountEffect(() => {
        loadDataOnlyOnce()
    });
    return (...);
}

UseMountEffect हुक के बारे में

दूसरे ऐरे तर्क के साथ useEffect का उपयोग करते useEffect , रिएक्ट बढ़ते (प्रारंभिक रेंडर) के बाद कॉलबैक चलाएगा और सरणी में एक या एक से अधिक मान बदल जाने के बाद। चूंकि हम एक खाली सरणी से गुजरते हैं, यह बढ़ते हुए ही चलेगा।

useMountEffect रिएक्ट हुक की दृष्टि को लागू करता है - स्वनिर्धारित हुक की रचना, देशी / आदिम हुक के आधार पर।

useEffect React हुक प्रत्येक परिवर्तन पर फ़ंक्शन को पारित करेगा। वांछित गुणों में परिवर्तन होने पर ही इसे कॉल करने के लिए अनुकूलित किया जा सकता है।

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

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

हुक के साथ यह इस तरह दिख सकता है:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

उपयोग करने के लिए दूसरे तर्क के रूप में खाली सरणी पास करें। reactjs.org/docs/… उद्धृत करते हुए यह प्रभावी रूप से रिएक्ट बताता है:

यह प्रतिक्रिया बताती है कि आपका प्रभाव किसी भी मूल्य पर या प्रॉप्स पर निर्भर नहीं करता है, इसलिए इसे फिर से चलाने की आवश्यकता नहीं है।

यहाँ एक स्निपेट है जिसे आप यह दिखाने के लिए चला सकते हैं कि यह काम करता है:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>


टी एल; डॉ

useEffect(yourCallback, []) - पहले रेंडर के बाद ही कॉलबैक को ट्रिगर करेगा।

विस्तृत विवरण

useEffect घटक के हर रेंडर के बाद डिफ़ॉल्ट रूप से चलता है (इस प्रकार प्रभाव पैदा करता है)।

जब आप अपने कंपोनेंट में useEffect हैं तो आप useEffect बताते हैं कि आप कॉलबैक को एक प्रभाव के रूप में चलाना चाहते हैं। प्रतिक्रिया रेंडर करने के बाद और DOM अपडेट करने के बाद प्रभाव को चलाएगी।

यदि आप केवल कॉलबैक पास करते हैं - कॉलबैक प्रत्येक रेंडर के बाद चलेगा।

यदि दूसरा तर्क (सरणी) पास कर रहा है, तो रिएक्ट पहले रेंडर के बाद कॉलबैक चलाएगा और हर बार सरणी में मौजूद तत्वों में से एक को बदल दिया जाएगा। उदाहरण के लिए जब useEffect(() => console.log('hello'), [someVar, someOtherVar]) - कॉलबैक पहले रेंडर के बाद चलेगा और किसी रेंडर के बाद कि किसी someVar या someOtherVar में से कोई बदल जाएगा।

दूसरे तर्क को खाली एरे पास करके, रिएक्ट प्रत्येक रेंडर को रेंडर करने के बाद तुलना करेगा और यह देखेगा कि कुछ भी नहीं बदला गया था, इस प्रकार कॉलबैक को पहले रेंडर के बाद ही कॉल करना होगा।





react-hooks