React + useState () + पिछलास्टैट

Question

या अधिक विशेष रूप से पहलू - मैं काफी प्रतिक्रिया और useState हुक को समझने में समस्याओं के लिए नया हूँ previousState ।

एक सामान्य उपयोगस्ट्रेट हुक, और शायद सबसे आम उदाहरण, इस तरह दिखता है:

import React, { useState} from 'react';

export default function CounterHooks({ initialCount }){
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <button onClick={() => setCount(count -1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

अब तक जो मैं समझ रहा हूं, वह निम्नलिखित है:

• मैं useState () फ़ंक्शन / हुक को कॉल करता हूं? और प्रारंभिक राज्य के तर्क में पास करें (initialCount)
• मुझे एक सरणी वापस मिलती है जिसे मैं तुरंत चर गणना और सेटकाउंट में नष्ट कर देता हूं (जो कि फ़ंक्शन है)
• सेटकाउंट () के साथ मैं राज्य को अद्यतन कर सकता हूं और इसलिए गणना चर

अब तक बहुत अच्छा, मुझे लगता है ...;)

कभी-कभी मुझे वही उदाहरण दिखाई देता है जिसमें प्रिस्टेट (prevCount) होता है जो मुझे समझ नहीं आता है:

<button onClick={() => setCount(prevCount => prevCount -1)}>-</button>

यहाँ क्या हुआ? यह हिस्सा मुझे समझ में नहीं आता है। मेरे विचार अब तक:

• इस मामले में, मैं किसी तरह पिछले गणना मूल्य का उपयोग करता हूं।
• setCount अब एक फ़ंक्शन की अपेक्षा करता है
• सेटकाउंट अब एसिंक्रोनस चलाया गया है
• यह समारोह कहां से आ रहा है?
• प्रीकाउंट कहां से आ रहा है?
• जब मैं इसे चलाता हूं, तो प्रीकाउंट में क्या डाला जाता है?

क्या आप मेरी उलझन को समझते हैं? मुझे यकीन नहीं है कि मुझे इसे अलग तरीके से कैसे तय करना चाहिए ...

आपकी मदद के लिए बहुत बहुत शुक्रिया।

Answer 1

सबसे पहले, आप आधिकारिक स्पष्टीकरण यहां देख सकते हैं ।

इस मामले में, मैं किसी तरह पिछले गणना मूल्य का उपयोग करता हूं।

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

setCount अब एक फ़ंक्शन की अपेक्षा करता है

चूंकि आप एक फ़ंक्शन प्रदान करते हैं, इसलिए इसका उपयोग कर सकते हैं।

सेटकाउंट अब एसिंक्रोनस चलाया गया है

दरअसल नहीं। यह एक एसिंक्रोनस फ़ंक्शन नहीं है। यह सिर्फ पिछली स्थिति प्रदान करता है और आप इसका उपयोग करते हैं। राज्य के निवासी अतुल्यकालिक नहीं हैं, राज्य का अद्यतन है।

यह समारोह कहां से आ रहा है?

प्रीकाउंट कहां से आ रहा है?

पहले से उत्तर दिया हुआ।

जब मैं इसे चलाता हूं, तो प्रीकाउंट में क्या डाला जाता है?

आप प्रदान करते हैं कि आप वहां नया राज्य स्थापित करना चाहते हैं। अपने उदाहरण में, आप count1 से वृद्धि करना चाहते हैं , इसलिए आप प्रदान कर रहे हैं+ 1

इस तर्क के लिए यहाँ एक भोली व्याख्या है। बस एक भोला। मैं इसे कॉलबैक लॉजिक को समझने के लिए जोड़ रहा हूं, यह रिएक्ट से संबंधित नहीं हैsetState.

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    return val(state);
  }

  return val;
}

const stateWithFunctionalUpdate = setState(prev => prev + 1);
const stateWithNormalUpdate = setState(9);
console.log(stateWithFunctionalUpdate);
console.log(stateWithNormalUpdate);

हो सकता है कि यह उदाहरण रिएक्ट के राज्य सेटिंग तर्क की नकल करने के लिए उपयुक्त होगा। फिर, बस एक भोली दृष्टिकोण।

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    state = val(state);
  } else {
    state = val;
  }

}

setState(9);
setState(prev => prev + 1);

console.log("state", state);

आइए (बिना टाइपिंग के) के वास्तविक कार्यान्वयन को देखें useState:

export function useState(initialState) {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    initialState
  );
}

खैर, यह सिर्फ useReducerपर्दे के पीछे का उपयोग करता है । यह प्रारंभिक स्थिति सेट करता है और बेसिकस्टेट्रेडर का उपयोग करता है जो है:

function basicStateReducer(state, action) {
  return typeof action === "function" ? action(state) : action;
}

हमारे भोले दृष्टिकोण की तरह, यह प्रकार के लिए देखता है actionऔर उसी के अनुसार व्यवहार करता है। अंत में, यही useReducer रिटर्न है :

return [workInProgressHook.memoizedState, dispatch];

इसलिए, दिन के अंत में, यदि हम कोई फ़ंक्शन प्रदान करते हैं, तो useStateवह इसे लेता है और फिर इसे हमारे राज्य पर चलाता है और मान वापस लौटाता है।

Answer 2

यहाँ मेरी राय है कि मैं कैसे समझता हूँ:

इस मामले में, मैं किसी तरह पिछले गणना मूल्य का उपयोग करता हूं। -> सेटकाउंट परम की जांच करेगा, अगर परम एक कॉलबैक है तो यह उस कॉल को वापस बुलाएगा और परम के लिए पिछले राज्य को पारित करेगा। कॉल बैक का परिणाम अगले राज्य में होगा।

setCount अब एक फंक्शन की उम्मीद करता है -> हाँ, फंक्शन आपको लॉजिक हैंडल करता है और अगले स्टेट्स पर वापस जाता है।

setCount अब रन एसिंक्रोनस है -> यह फ़ंक्शन सिंक्रोनस है, लेकिन इसके परिणाम के बाद। सेटकाउंट के लिए हुक अगले राज्य को अपडेट करने के लिए ईवेंट भेजेगा

यह समारोह कहां से आ रहा है? -> आपका कार्य फंक्शन में कुछ भी कर सकता है जब तक कि परम वर्तमान स्थिति होगा और एक अगले राज्य को वापस कर देगा।

प्रीकाउंट कहां से आ रहा है? - कॉल सेटाउंट पास होने पर इसे पास किया जाएगा (यह वर्तमान स्थिति से प्राप्त होता है)।

जब मैं इसे चलाता हूं, तो प्रीकाउंट में क्या डाला जाता है? -> सेटकाउंट की वर्तमान स्थिति।

=> यहां मान सेट करने के लिए या कॉल बैक करने के लिए उदाहरण यहां देखें: सेट करें हुक, सेटस्टैट फ़ंक्शन का उपयोग करें। पिछले राज्य मान तक पहुँचना