Reset.js এ সেটস্টেট বনাম রিপ্লেসস্টেট

Question 1

আমি রিঅ্যাক্ট.জেএস লাইব্রেরিতে নতুন এবং আমি টিউটোরিয়ালের কিছু অংশ ঘুরে দেখলাম এবং আমি এলো:

this.setState
this.replaceState

প্রদত্ত বিবরণ খুব পরিষ্কার নয় (আইএমও)।

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});এবং তারপরে কনসোল.লগ করেছি এবং আমি দেখতে পেয়েছি যে stateএখন dataএবং উভয়ই ছিল test।

তারপরে, আমি this.setState({data: someArray});অনুসরণ করার চেষ্টা করেছি this.setState({test: someArray});এবং তারপরে কনসোল.লগ করেছি এবং আমি দেখতে পেলাম যে stateআবারও ছিল dataএবং উভয়ই test।

তাহলে, দুজনের মধ্যে ঠিক কী পার্থক্য রয়েছে?

Question 2

সঙ্গে 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)পরীক্ষার সময় করবেন না ।

Question 3

উদাহরণস্বরূপ সংজ্ঞা:

// 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"}

ডক্স থেকে এটি নোট করুন , যদিও:

সেটস্টেট () অবিলম্বে এই.স্টেটকে রূপান্তরিত করে না তবে একটি মুলতুবি অবস্থায় স্থিতিশীলতা তৈরি করে। এই পদ্ধতিটি কল করার পরে এটি.স্টেট অ্যাক্সেস করা সম্ভাব্যভাবে বিদ্যমান মানটি ফিরিয়ে দিতে পারে।

একই জন্য যায় replaceState()

Question 4

মতে ডক্স , replaceStateঅবচিত পেতে পারে:

এই পদ্ধতিটি ES6 শ্রেণীর উপাদানগুলিতে পাওয়া যায় না যা React.Comp घटकকে প্রসারিত করে। এটি প্রতিক্রিয়ার ভবিষ্যতের সংস্করণে পুরোপুরি সরিয়ে দেওয়া যেতে পারে।

Question 5

যেহেতু 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
}

জেএসএক্সে:

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);