Tại sao việc sử dụng hàm bên trong #setState của React giải quyết các vấn đề không đồng bộ?

Question

Từ docs, nó nói "React có thể batch nhiều setState() gọi vào một cập nhật duy nhất cho hiệu suất" vì vậy nó khuyến cáo sử dụng một hàm thay vì một đối tượng cho đối số setState. Điều này giải quyết vấn đề như thế nào?

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

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

Answer 1

Khi bạn chuyển một đối tượng tới setState, phản ứng sẽ chuyển mọi thứ vào, tạo sự kiện. Như các tài liệu nói, nếu nhiều setState được chạy, phản ứng có thể gộp chúng lại với nhau và kể từ khi nó xảy ra không đồng bộ, tại một số điểm trên đường, khi bạn chạy ví dụ đầu tiên, nó có thể sử dụng this.state.counter. tác dụng phụ. Tùy chọn thứ hai được coi là an toàn hơn vì nó giống như lời hứa: Khi bạn chuyển vào một hàm, React sẽ chỉ chạy hàm này khi trạng thái thực sự được cập nhật. Điều này đảm bảo rằng bạn có đúng biến this.state.counter mỗi lần bạn cập nhật bằng cách sử dụng biến số prevState mà chúng cung cấp làm đối số cho hàm gọi lại.

Tôi đã không gặp phải vấn đề khi sử dụng phương pháp đầu tiên nhưng tôi cũng chưa thử tràn ngập một loạt các cuộc gọi setState cùng một lúc mà tôi chắc chắn là khi điều này xảy ra. Cách chính tôi đã nhìn thấy người hôi thối này là khi họ đang cố gắng sử dụng trạng thái mới ngay sau khi thiết lập trạng thái.

ví dụ:

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

trong ví dụ mà người ta có thể hy vọng rằng khi useNewCounter được gọi như vậy nó sẽ được sử dụng trạng thái mới nhất, nhưng nó sẽ không, tài liệu tham khảo sẽ vẫn được chỉ vào giá trị trước đó cho đến khi phản ứng cập nhật trạng thái sẽ ở một thời điểm nào đó sau khi phương thức này được gọi.