React.js'de setState ve replaceState karşılaştırması

React.js Kitaplığı'nda yeniyim ve bazı eğitimleri gözden geçiriyordum ve karşılaştım:

• this.setState
• this.replaceState

Verilen Açıklama çok net değil (IMO).

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

Benzer şekilde,

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

this.setState({data: someArray});Ardından this.replaceState({test: someArray});ve ardından console.log onları denedim ve stateşimdi hem datave hem de olduğunu öğrendim test.

Sonra, this.setState({data: someArray});ardından denedim this.setState({test: someArray});ve sonra console.log onları denedim ve statetekrar hem datave hem de olduğunu buldum test.

Peki ikisi arasındaki fark tam olarak nedir?

İle setStatemevcut ve önceki devletler birleştirilmiş bulunmaktadır. İle replaceStatemevcut durumu atar ve onu yalnızca sizin sağladığınız şeyle değiştirir. Genellikle setState, herhangi bir nedenle anahtarları gerçekten çıkarmanız gerekmedikçe kullanılır; ancak bunları yanlış / null olarak ayarlamak genellikle daha açık bir taktiktir.

Mümkün olsa da değişebilir; replaceState şu anda durum olarak, yani bir replaceState(x)kez ayarlandığında , iletilen nesneyi kullanır this.state === x. Bu biraz daha hafiftir setState, bu nedenle binlerce bileşen durumlarını sık sık ayarlıyorsa optimizasyon olarak kullanılabilir.
_{Bunu bu test durumuyla öne sürdüm .}

Mevcut durumunuz ise {a: 1}ve ararsanız this.setState({b: 2}); devlet uygulandığında olacaktır {a: 1, b: 2}. Eğer ararsan this.replaceState({b: 2})eyaletin olur {b: 2}.

Yan not: Durum anında belirlenmez, bu nedenle this.setState({b: 1}); console.log(this.state)test ederken yapmayın .

Örnekle tanım:

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

Bununla birlikte , bunu dokümanlardan not alın :

setState () this.state'i hemen değiştirmez, ancak bir bekleyen durum geçişi oluşturur. Bu yöntemi çağırdıktan sonra this.state'e erişmek potansiyel olarak mevcut değeri döndürebilir.

Aynısı için de geçerli replaceState()

Dokümanlara göre , replaceStatekullanımdan kaldırılabilir:

Bu yöntem, React.Component'i genişleten ES6 sınıfı bileşenlerde mevcut değildir. React'in gelecekteki bir sürümünde tamamen kaldırılabilir.

Yana replaceStateartık önerilmemektedir, burada çok basit bir çözümdür. Muhtemelen buna ihtiyaç duymak için başvurmanız / başvurmanız pek nadiren mümkün olsa da.

Durumu kaldırmak için:

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

Veya alternatif olarak, birden fazla arama yapmak istemiyorsanız setState

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

Esasen, durumdaki tüm önceki anahtarlar şimdi geri dönüyor undefinedve bu, bir ififadeyle çok kolay bir şekilde filtrelenebilir :

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'te:

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

Son olarak, durumu "değiştirmek" için, yeni durum nesnesini mevcut eski durumun bir kopyasıyla birleştirmeniz ve durumu durum olarak undefinedayarlamanız yeterlidir :

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