Dlaczego użycie funkcji wewnątrz #setState React rozwiązuje asynchroniczne problemy?

Question

Z poziomu docs jest napisane: "React może grupować wiele wywołań setState() w pojedynczą aktualizację dla wydajności", więc zaleca użycie funkcji zamiast obiektu dla argumentu setState. Jak to rozwiązuje problem?

// Wrong 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
}); 

// Correct 
this.setState((prevState, props) => ({ 
    counter: prevState.counter + props.increment 
})); 

Answer 1

Po przejechaniu w obiekcie do setstate, reagują zajmie cokolwiek przekazać w, stworzyć wydarzenie, które będą śledzić, co zostało przekazane w, a następnie w końcu zaktualizować stan. Jak mówią doktorzy, jeśli uruchomionych jest wiele setStates, reakcja może je wsypać razem, a ponieważ ma się odbyć asynchronicznie, aka w pewnym momencie w dół drogi, po uruchomieniu pierwszego przykładu może użyć this.state.counter, która jest rzeczywiście stara i powoduje nieoczekiwane skutki uboczne.

Druga opcja jest uważana za bezpieczniejszą, ponieważ jest bardzo podobna do obietnicy: Po przekazaniu funkcji React uruchomi tę funkcję tylko po zaktualizowaniu stanu. Zapewnia to poprawną zmienną this.state.counter za każdym razem, gdy aktualizujesz ją za pomocą zmiennej prevState dostarczanej jako argument do wywołania zwrotnego.

Sam nie natknąłem się na problem przy użyciu pierwszej metody, ale także nie próbowałem zalać kilku wywołań setStates na raz, które jestem pewien, kiedy to się pojawi. Głównym sposobem, w jaki widziałem tych paskudnych ludzi jest to, kiedy próbują użyć nowego stanu zaraz po ustawieniu stanu.

na przykład:

increaseCounter() { 
this.setState({ 
    counter: this.state.counter + this.props.increment, 
}); 

// this will more then likely be the previous value 
// as setState does not run right away, but asynchronously 
this.useNewCounter(this.state.counter) 
} 

w tym przykładzie można by się spodziewać, że kiedy useNewCounter nazywa się, że będzie za pomocą najnowszy stan, ale to nie będzie odniesienie nadal będzie skierowany na poprzedniej wartości momentu reaguje aktualizuje stan, który będzie w pewnym momencie po wywołaniu tej metody.