Bir bileşende bir sayacı artırdığınızı hayal edin:
class SomeComponent extends Component{
state = {
updatedByDiv: '',
updatedByBtn: '',
counter: 0
}
divCountHandler = () => {
this.setState({
updatedByDiv: 'Div',
counter: this.state.counter + 1
});
console.log('divCountHandler executed');
}
btnCountHandler = () => {
this.setState({
updatedByBtn: 'Button',
counter: this.state.counter + 1
});
console.log('btnCountHandler executed');
}
...
...
render(){
return (
...
// a parent div
<div onClick={this.divCountHandler}>
// a child button
<button onClick={this.btnCountHandler}>Increment Count</button>
</div>
...
)
}
}
Hem üst hem de alt bileşenlere eklenmiş bir sayım işleyicisi vardır. Bu bilinçli olarak yapılır, böylece setState () 'i aynı tıklama olayı köpürme bağlamında, ancak 2 farklı işleyiciden iki kez çalıştırabiliriz.
Tahmin edebileceğimiz gibi, olay köpürme aşaması sırasında hedeften en dıştaki konteynere doğru kabarcıklar oluşturduğundan, düğme üzerindeki tek bir tıklama olayı artık bu iki işleyiciyi de tetikleyecektir.
Bu nedenle, önce btnCountHandler () çalıştırılır, sayımı 1'e yükseltmesi beklenir ve ardından divCountHandler () çalıştırılır ve sayımı 2'ye yükseltmesi beklenir.
Ancak, React Developer araçlarında inceleyebileceğiniz gibi sayı yalnızca 1'e yükselir.
Bu tepki verdiğini kanıtlıyor
tüm setState çağrılarını sıralar
bağlamdaki son yöntemi çalıştırdıktan sonra bu kuyruğa geri döner (bu durumda divCountHandler)
Birden fazla setState çağrısında meydana gelen tüm nesne mutasyonlarını aynı bağlamda (tek bir olay fazındaki tüm yöntem çağrıları örneğin aynı bağlamdır) tek bir nesne mutasyon sözdiziminde birleştirir (birleştirme mantıklıdır çünkü bu nedenle durum özelliklerini bağımsız olarak güncelleyebiliriz setState () ilk etapta)
ve birden çok setState () çağrısı nedeniyle yeniden oluşturmayı önlemek için tek bir setState () öğesine aktarır (bu, yığınlamanın çok ilkel bir açıklamasıdır).
React tarafından çalıştırılan sonuç kodu:
this.setState({
updatedByDiv: 'Div',
updatedByBtn: 'Button',
counter: this.state.counter + 1
})
Bu davranışı durdurmak için, nesneleri argüman olarak setState yöntemine iletmek yerine geri çağrılar iletilir.
divCountHandler = () => {
this.setState((prevState, props) => {
return {
updatedByDiv: 'Div',
counter: prevState.counter + 1
};
});
console.log('divCountHandler executed');
}
btnCountHandler = () => {
this.setState((prevState, props) => {
return {
updatedByBtn: 'Button',
counter: prevState.counter + 1
};
});
console.log('btnCountHandler executed');
}
Son yöntem yürütmeyi bitirdikten sonra ve react setState kuyruğunu işlemek için geri döndüğünde, sıradaki her setState için geri çağrıyı çağırır ve önceki bileşen durumuna geçer.
Bu şekilde tepki, kuyruktaki son geri aramanın önceki tüm muadillerinin el koyduğu durumu güncellemesini sağlar.