setState กับ replaceState ใน React.js

ฉันยังใหม่กับ React.js Library และฉันกำลังอ่านบทแนะนำบางส่วนและฉันก็เจอ:

• 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});แล้ว console.logged พวกเขาและฉันพบว่าstateอีกครั้งมีทั้งdataและtest.

แล้วอะไรคือความแตกต่างระหว่างทั้งสอง?

ด้วยsetStateสถานะปัจจุบันและก่อนหน้าจะรวมเข้าด้วยกัน ด้วยreplaceStateมันจะพ่นสถานะปัจจุบันออกมาและแทนที่ด้วยสิ่งที่คุณระบุเท่านั้น โดยปกติsetStateจะใช้เว้นแต่คุณจำเป็นต้องเอากุญแจออกด้วยเหตุผลบางประการ แต่การตั้งค่าเป็นเท็จ / ว่างมักจะเป็นกลยุทธ์ที่ชัดเจนกว่า

แม้ว่าจะเป็นไปได้ แต่ก็สามารถเปลี่ยนแปลงได้ ปัจจุบัน replaceState ใช้วัตถุที่ส่งผ่านเป็นสถานะเช่น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)เมื่อทดสอบ

นิยามตามตัวอย่าง:

// 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 () ไม่กลายพันธุ์ this.state ทันที แต่สร้างการเปลี่ยนสถานะที่รอดำเนินการ การเข้าถึง this.state หลังจากเรียกเมธอดนี้สามารถคืนค่าที่มีอยู่ได้

เช่นเดียวกันสำหรับ replaceState()

อ้างอิงถึงเอกสาร , replaceStateอาจจะเลิกใช้:

วิธีนี้ใช้ไม่ได้กับส่วนประกอบคลาส ES6 ที่ขยาย React.Component อาจถูกลบออกทั้งหมดใน React เวอร์ชันอนาคต

เนื่องจาก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);