setState so với ReplaceState trong React.js

Tôi mới sử dụng Thư viện React.js và tôi đã xem qua một số hướng dẫn và tôi đã xem qua:

• this.setState
• this.replaceState

Mô tả đưa ra không rõ ràng lắm (IMO).

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

Tương tự,

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

Tôi đã thử this.setState({data: someArray});theo dõi this.replaceState({test: someArray});và sau đó console.logs chúng và tôi thấy rằng statebây giờ có cả hai datavà test.

Sau đó, tôi đã thử this.setState({data: someArray});theo dõi this.setState({test: someArray});và sau đó console.log chúng và tôi thấy rằng statemột lần nữa có cả hai datavà test.

Vì vậy, chính xác sự khác biệt giữa hai là gì?

Với setStatetrạng thái hiện tại và trước đó được hợp nhất. Với replaceState, nó loại bỏ trạng thái hiện tại và chỉ thay thế nó bằng những gì bạn cung cấp. Thường setStateđược sử dụng trừ khi bạn thực sự cần loại bỏ các phím vì lý do nào đó; nhưng đặt chúng thành false / null thường là một chiến thuật rõ ràng hơn.

Mặc dù có thể nhưng nó có thể thay đổi; ReplaceState hiện đang sử dụng đối tượng được truyền làm trạng thái, tức là replaceState(x)khi nó được đặt this.state === x. Điều này nhẹ hơn một chút setState, vì vậy nó có thể được sử dụng như một sự tối ưu hóa nếu hàng nghìn thành phần đang thiết lập trạng thái của chúng thường xuyên.
_{Tôi khẳng định điều này với trường hợp thử nghiệm này .}

Nếu trạng thái hiện tại của bạn là {a: 1}, và bạn gọi this.setState({b: 2}); khi trạng thái được áp dụng, nó sẽ được {a: 1, b: 2}. Nếu bạn được gọi là this.replaceState({b: 2})trạng thái của bạn {b: 2}.

Lưu ý phụ: Trạng thái không được đặt ngay lập tức, vì vậy không nên thực hiện this.setState({b: 1}); console.log(this.state)khi kiểm tra.

Định nghĩa bằng ví dụ:

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

Tuy nhiên, hãy lưu ý điều này từ các tài liệu :

setState () không đột biến this.state ngay lập tức nhưng tạo ra một chuyển đổi trạng thái đang chờ xử lý. Việc truy cập this.state sau khi gọi phương thức này có thể trả về giá trị hiện có.

Tương tự với replaceState()

Theo tài liệu , replaceStatecó thể không được dùng nữa:

Phương thức này không khả dụng trên các thành phần lớp ES6 mở rộng React.Component. Nó có thể bị xóa hoàn toàn trong phiên bản React trong tương lai.

Vì replaceStatehiện không được dùng nữa, đây là một giải pháp rất đơn giản. Mặc dù có lẽ khá hiếm khi bạn cần / nên dùng đến điều này.

Để loại bỏ trạng thái:

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

Hoặc, nếu bạn không muốn có nhiều cuộc gọi đến setState

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

Về cơ bản, tất cả các khóa trước đó ở trạng thái hiện trở lại undefined, có thể rất dễ dàng được lọc bằng một ifcâu lệnh:

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
}

Trong JSX:

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

Cuối cùng, để "thay thế" trạng thái, chỉ cần kết hợp đối tượng trạng thái mới với bản sao của trạng thái cũ đã có undefinedvà đặt nó là trạng thái:

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