रिएक्ट हुक: द डीप कट्स

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

प्रतिक्रिया पेश किए गए हुक 16.8 संस्करण में वापस और तब से और अधिक जोड़ रहा है। कुछ दूसरों की तुलना में अधिक उपयोग और लोकप्रिय हैं, जैसे useEffect, useState, तथा useContext हुक मुझे इसमें कोई संदेह नहीं है कि यदि आप रिएक्ट के साथ काम करते हैं तो आप उन तक पहुँच गए हैं।

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

useReducer

RSI useReducer हुक अन्य हुक की तरह एक राज्य प्रबंधन उपकरण है। विशेष रूप से, यह का एक विकल्प है useState हुक।

यदि आप उपयोग करते हैं useReducer हुक दो या दो से अधिक राज्यों (या क्रियाओं) को बदलने के लिए, आपको उन राज्यों में व्यक्तिगत रूप से हेरफेर नहीं करना पड़ेगा। हुक सभी राज्यों पर नज़र रखता है और सामूहिक रूप से उनका प्रबंधन करता है। दूसरे शब्दों में: यह राज्य परिवर्तनों का प्रबंधन और पुन: प्रस्तुत करता है। से भिन्न useState हुक, useReducer जब जटिल परियोजनाओं में कई राज्यों को संभालने की बात आती है तो यह आसान हो जाता है।

उपयोग के मामलों

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

वाक्य - विन्यास

useReducer तीन तर्क स्वीकार करता है, जिनमें से एक वैकल्पिक है:

• एक कम करनेवाला समारोह
• initialState
• an init समारोह (वैकल्पिक)

const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argument

उदाहरण

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

import { useReducer } from 'react';
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'USER_INPUT':
      return { ...state, userInput: action.payload };
    case 'TOGGLE_COLOR':
      return { ...state, color: !state.color };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0, userInput: '', color: false })

  return (
    <main className="App, App-header" style={{ color: state.color ? '#000' : '#FF07FF'}}>
      <input style={{margin: '2rem'}}
        type="text"
        value={state.userInput}
        onChange={(e) => dispatch({ type: 'USER_INPUT', payload: e.target.value })}
      />
      <br /><br />
      <p style={{margin: '2rem'}} >{state.count}</p>
      <section style={{margin: '2rem'}}>
        <button  onClick={(() => dispatch({ type: 'DECREMENT' }))}>-</button>
        <button onClick={(() => dispatch({ type: 'INCREMENT' }))}>+</button>
        <button onClick={(() => dispatch({ type: 'TOGGLE_COLOR' }))}>Color</button>
      </section>
      <br /><br />
      <p style={{margin: '2rem'}}>{state.userInput}</p>
    </main>
  );
}
export default App;

ऊपर दिए गए कोड से, हमने देखा कि कैसे हम कई राज्यों को आसानी से प्रबंधित करने में सक्षम हैं reducer, (स्विच-केस), यह के लाभ को दर्शाता है useReducer. यह वह शक्ति है जो कई राज्यों के साथ जटिल अनुप्रयोगों में काम करते समय देती है।

useRef

RSI useRef डीओएम तक पहुंचने के लिए तत्वों पर रेफरी बनाने के लिए हुक का उपयोग किया जाता है। लेकिन इससे भी अधिक, यह एक वस्तु को a . के साथ लौटाता है .current संपत्ति जो एक घटक के पूरे जीवनचक्र में उपयोग की जा सकती है, जिससे डेटा को फिर से प्रस्तुत किए बिना बने रहने की अनुमति मिलती है। इतना useRef मान रेंडरर्स के बीच समान रहता है; संदर्भ को अद्यतन करने से पुन: प्रस्तुतीकरण ट्रिगर नहीं होता है।

उपयोग के मामलों

के लिए पहुँचते हैं useRef हुक जब आप चाहते हैं:

• संग्रहीत परिवर्तनीय जानकारी के साथ डीओएम में हेरफेर करें।
• चाइल्ड कंपोनेंट्स (नेस्टेड एलिमेंट्स) से एक्सेस जानकारी।
• किसी तत्व पर फ़ोकस सेट करें।

पुन: प्रस्तुत किए बिना आपके ऐप में परिवर्तनशील डेटा संग्रहीत करते समय यह सबसे उपयोगी होता है।

वाक्य - विन्यास

useRef केवल एक तर्क को स्वीकार करता है, जो है प्रारंभिक मूल्य.

const newRefComponent = useRef(initialValue);

उदाहरण

यहाँ मैंने इस्तेमाल किया useRef और useState एक टेक्स्ट इनपुट में टाइप करते समय कोई एप्लिकेशन अपडेटेड स्थिति को कितनी बार प्रस्तुत करता है, यह दिखाने के लिए हुक।

import './App.css'

function App() {
  const [anyInput, setAnyInput] = useState(" ");
  const showRender = useRef(0);
  const randomInput = useRef();
  const toggleChange = (e) => {
    setAnyInput (e.target.value);
    showRender.current++;
  
  }
  const focusRandomInput = () => {
    randomInput.current.focus();
  }

  return (
    <div className="App">
      <input className="TextBox" 
        ref ={randomInput} type="text" value={anyInput} onChange={toggleChange}
      />
      <h3>Amount Of Renders: {showRender.current}</h3>
      <button onClick={focusRandomInput}>Click To Focus On Input </button>
    </div>
  );
}

export default App;

ध्यान दें कि टेक्स्ट फ़ील्ड में प्रत्येक वर्ण कैसे टाइप करना ऐप की स्थिति को अपडेट करता है, लेकिन कभी भी पूर्ण री-रेंडर को ट्रिगर नहीं करता है।

useImperativeHandle

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

खैर, useImperativeHandle माता-पिता के लिए बाल घटक के कार्यों तक पहुंच बनाना संभव बनाता है।

वह कैसे काम करता है?

• चाइल्ड कंपोनेंट में एक फंक्शन परिभाषित किया गया है।
• A ref जनक में जोड़ा जाता है।
• हम का उपयोग करें forwardRefअनुमति दे रहा है ref जिसे बच्चे को पारित करने के लिए परिभाषित किया गया था।
• useImperativeHandle के माध्यम से बच्चे के कार्यों को उजागर करता है ref.

उपयोग के मामलों

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

वाक्य - विन्यास

useImperativeHandle (ref, createHandle, [dependencies])

उदाहरण

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

// Parent component
import React, { useRef } from "react";
import ChildComponent from "./childComponent";
import './App.css';

function useImperativeHandle() {
  const controlRef = useRef(null);
  return (
    onClick={
      () => {
        controlRef.current.controlPrint();
      }
    }
    >
    Parent Box
  );
}
export default useImperativeHandle;

// Child component
import React, { forwardRef, useImperativeHandle, useState } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const [print, setPrint] = useState(false);
  useImperativeHandle(ref, () => ({
    controlPrint() 
    { setPrint(!print); },
  })
  );

  return (
    <>
    Child Box
    { print && I am from the child component }
  );
});

export default ChildComponent;

उत्पादन

useMemo

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

आप देखते हैं, कार्य राज्य परिवर्तनों का जवाब देते हैं। useMemo हुक एक समारोह लेता है और उस फ़ंक्शन का रिटर्न मान लौटाता है. यह उस मूल्य को फिर से प्रस्तुत करने के अतिरिक्त प्रयासों को खर्च करने से रोकने के लिए कैश करता है, फिर जब निर्भरता में से एक बदल जाता है तो उसे वापस कर देता है।

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

उपयोग के मामलों

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

वाक्य - विन्यास

useMemo( () => 
  { // Code goes here },
  []
)

उदाहरण

बटन पर क्लिक करते समय, यह मिनी-प्रोग्राम इंगित करता है कि जब कोई संख्या सम या विषम होती है, तो मान का वर्ग करती है। मैंने इसकी गणना शक्ति बढ़ाने के लिए लूप में बहुत सारे शून्य जोड़े। यह स्पिल्ड सेकंड में मान लौटाता है और फिर भी के कारण अच्छी तरह से काम करता है useMemo हुक।

// UseMemo.js
import React, { useState, useMemo } from 'react'

function Memo() {
  const [memoOne, setMemoOne] = useState(0);
  const incrementMemoOne = () => { setMemoOne(memoOne + 1) }
  const isEven = useMemo(() => { 
    let i = 0 while (i < 2000000000) i++ return memoOne % 2 === 0
  },
  [memoOne]);
  
  const square = useMemo(()=> { 
    console.log("squared the number"); for(var i=0; i < 200000000; i++);
    return memoOne * memoOne;
  },
  [memoOne]);

  return (
    Memo One - 
    { memoOne }
    { isEven ? 'Even' : 'Odd' } { square } 
  );
}
export default Memo

उत्पादन

useMemo थोड़ा सा है useCallback हुक, लेकिन अंतर यह है कि useMemo किसी फ़ंक्शन से याद किए गए मान को संग्रहीत कर सकते हैं, जहां useCallback याद किए गए फ़ंक्शन को स्वयं संग्रहीत करता है।

useCallback

RSI useCallback हुक एक और दिलचस्प है और आखिरी खंड यह क्या करता है इसके लिए एक स्पॉइलर अलर्ट की तरह था।

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

उपयोग के मामलों

पसंद useMemo, useCallback यह एक अच्छा प्रदर्शन अनुकूलन है जिसमें यह एक मेमोइज्ड कॉलबैक और इसकी किसी भी निर्भरता को फिर से प्रस्तुत किए बिना संग्रहीत करता है और देता है।

वाक्य - विन्यास

const getMemoizedCallback = useCallback (
  () => { doSomething () }, []
);

उदाहरण

{ useCallback, useState } from "react";
import CallbackChild from "./UseCallback-Child";
import "./App.css"

export default function App() {
  const [toggle, setToggle] = useState(false);
  const [data, setData] = useState("I am a data that would not change at every render, thanks to the useCallback");
  const returnFunction = useCallback(
    (name) => 
    { return data + name; }, [data]
  );
  return (
    onClick={() => {
      setToggle(!toggle);
    }}
    >
    {" "}

    // Click To Toggle
    { toggle && h1. Toggling me no longer affects any function } 
  ); 
}

// The Child component
import React, { useEffect } from "react";

function CallbackChild(
  { returnFunction }
) {
  useEffect(() => 
    { console.log("FUNCTION WAS CALLED"); },
    [returnFunction]);
  return { returnFunction(" Hook!") };
}
export default CallbackChild;

उत्पादन

अंतिम विचार

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

उन्हें पूरी तरह से समझने का सबसे अच्छा तरीका अभ्यास है। इसलिए मैं आपको बेहतर समझ के लिए अपने आवेदन में इन हुक का उपयोग करने का अभ्यास करने के लिए प्रोत्साहित करता हूं। उसके लिए, आप निम्नलिखित संसाधनों की जाँच करके और अधिक गहराई से प्राप्त कर सकते हैं: