React.js में setState को प्रतिस्थापित करें

Question

मैं React.js लाइब्रेरी में नया हूं और मैं कुछ ट्यूटोरियल्स पर जा रहा हूं और मैं भर आया हूं:

• this.setState
• this.replaceState

दिया गया विवरण बहुत स्पष्ट नहीं है (IMO)।

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

इसी तरह,

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

मैंने कोशिश की this.setState({data: someArray});, जिसके बाद this.replaceState({test: someArray});और फिर उन्हें console.logged और मैंने पाया कि stateअब था दोनों dataऔर test।

फिर, मैंने this.setState({data: someArray});इसके बाद प्रयास किया this.setState({test: someArray});और फिर उन्हें सांत्वना दी। मैंने पाया कि stateदोनों के पास फिर से dataऔर है test।

तो, वास्तव में दोनों के बीच अंतर क्या है?

Comments

आपका पहला उदाहरण गलत है। प्रतिस्थापितस्टेट पिछली स्थिति को हटा देगा। आप इसकी गलत तरीके से जांच कर रहे हैं।

— ब्रिगैंड

मैं कॉलबैक में बदलाव नहीं ढूंढ रहा था। शायद इसीलिए ..

— myusuf

Answer 1

साथ setStateवर्तमान और पिछले राज्यों मर्ज किए गए हैं। इसके साथ replaceState, यह वर्तमान स्थिति को बाहर फेंकता है, और इसे केवल आपके द्वारा प्रदान किए जाने के साथ बदल देता है। आमतौर पर setStateइसका उपयोग तब तक किया जाता है जब तक आपको वास्तव में किसी कारण से चाबियाँ निकालने की आवश्यकता न हो; लेकिन उन्हें झूठी / अशक्त करने के लिए आमतौर पर एक अधिक स्पष्ट रणनीति है।

जबकि यह संभव है कि यह बदल सकता है; प्रतिस्थापितस्टेट वर्तमान में राज्य के रूप में पारित वस्तु का उपयोग करता है, अर्थात replaceState(x), और एक बार यह सेट हो जाने के बाद this.state === x। यह तुलना में थोड़ा हल्का है setState, इसलिए इसे एक अनुकूलन के रूप में इस्तेमाल किया जा सकता है यदि हजारों घटक अपने राज्यों को अक्सर सेट कर रहे हैं।
_{मैंने इस परीक्षण के मामले में जोर दिया ।}

---

यदि आपकी वर्तमान स्थिति है {a: 1}, और आप कॉल करते हैं this.setState({b: 2}); जब राज्य लागू होता है, तो यह होगा {a: 1, b: 2}। यदि आप कहते हैं कि this.replaceState({b: 2})आपका राज्य होगा {b: 2}।

साइड नोट: राज्य तुरंत सेट नहीं किया जाता है, इसलिए this.setState({b: 1}); console.log(this.state)परीक्षण करते समय ऐसा न करें ।

Comments

फिर भी मेरे लिए अस्पष्ट। क्या आप एक उदाहरण दे सकते हैं, जिसमें एक का उपयोग करने से परिणाम में परिवर्तन होता है, यानी यह विलय जो आप का जिक्र कर रहे हैं ...

— Serj Sagan

पूर्व स्थिति और वर्तमान स्थिति कैसी है, जैसा कि हम उन तक कैसे पहुँच सकते हैं? इसके अलावा, मैंने राज्य को बदलने के लिए एक ऑब्जेक्ट पास किया था, लेकिन फिर भी पिछले राज्य का डेटा अभी भी मौजूद था।

— माईसुफ

तो राज्य कब सेट है? जैसे कि मैं कब सांत्वना दे सकता हूँ?

— myusuf

@myusuf.setState({...}, callback)

— बटमार

Answer 2

उदाहरण द्वारा परिभाषा:

// let's say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

यद्यपि डॉक्स से इस पर ध्यान दें :

setState () तुरंत इसे बदल नहीं पाता है। यह स्थिर है, लेकिन एक लंबित राज्य संक्रमण बनाता है। इस पद्धति पर कॉल करने के बाद एक्सेस करना संभवत: मौजूदा मान को लौटा सकता है।

उसी के लिए जाता है replaceState()

Answer 3

डॉक्स के अनुसार , replaceStateपदावनत हो सकते हैं:

यह विधि ES6 वर्ग घटकों पर उपलब्ध नहीं है जो React.Component का विस्तार करती है। यह पूरी तरह से प्रतिक्रिया के भविष्य के संस्करण में हटाया जा सकता है।

Comments

क्या कोई प्रतिस्थापन विधि है जो समान है?

— शून्य_कोल

एक "समान" विधि के लिए, आप इस का उपयोग कर सकते हैं। शुरू ({सभी: अपरिभाषित, पुराना: अपरिभाषित, कुंजियाँ: अपरिभाषित, नया: मान})

— Wren

@Ren, यह क्या है? क्या यह आधिकारिक हस्ताक्षर राज्य को रीसेट करने के लिए है?

— ग्रीन

नहीं, यह स्पष्ट रूप से पूर्व-मौजूदा स्थिति को अपरिभाषित करने के लिए सेट कर रहा है, जो सभी मौजूदा कुंजियों के बिना "रीप्लेस्टेट" का शुद्ध परिणाम है।

— व्रेन

Answer 4

चूंकि replaceStateअब पदावनत कर दिया गया है, यहाँ एक बहुत ही सरल समाधान है। हालांकि यह शायद ही कभी कम होता है कि आपको इसकी आवश्यकता का सहारा लेना चाहिए।

राज्य को हटाने के लिए:

for (const old_key of Object.keys(this.state))
    this.setState({ [old_key]: undefined });

या, वैकल्पिक रूप से, यदि आप एक से अधिक कॉल नहीं करना चाहते हैं setState

const new_state = {};
for (const old_key of Object.keys(this.state))
    new_state[old_key] = undefined;
this.setState(new_state);

अनिवार्य रूप से, राज्य की सभी पिछली चाबियां अब वापस आ जाती हैं undefined, जिन्हें बहुत आसानी से एक ifबयान के साथ फ़िल्टर किया जा सकता है :

if (this.state.some_old_key) {
    // work with key
} else {
    // key is undefined (has been removed)
}

if ( ! this.state.some_old_key) {
    // key is undefined (has been removed)
} else {
    // work with key
}

JSX में:

render() {
    return <div>
        { this.state.some_old_key ? "The state remains" : "The state is gone" }
    </div>
}

अंत में, राज्य को "बदलने" के लिए, बस पुराने राज्य की एक प्रतिलिपि के साथ नई राज्य वस्तु को मिलाएं जो कि किया गया है undefined, और इसे इस रूप में सेट करें:

const new_state = {new_key1: "value1", new_key2: "value2"};
const state = this.state;

for (const old_key of Object.keys(state))
    state[old_key] = undefined;

for (const new_key of Object.keys(new_state))
    state[new_key] = new_state[new_key];

this.setState(state);