Làm thế nào để việc render của React hoạt động chính xác khi chúng ta gọi setState?

Trong React, việc render hoạt động chính xác khi gọi setState dựa trên một số nguyên tắc cơ bản của thư viện này:

1. Bất đồng bộ của setState

Khi bạn gọi setState, React sẽ lên lịch một cập nhật trạng thái cho component. Tuy nhiên, setState không cập nhật trạng thái ngay lập tức mà thay vào đó, nó khởi tạo một quá trình cập nhật bất đồng bộ. Điều này có nghĩa là React có thể gom chung nhiều lần gọi setState vào một lần cập nhật duy nhất để tối ưu hóa hiệu suất.

2. Quá trình cập nhật

Sau khi setState được gọi, React sẽ thực hiện các bước sau:

• Lên lịch cập nhật: React sẽ lên lịch một cập nhật và đưa nó vào hàng đợi cập nhật.
• Reconciliation: React sẽ so sánh phiên bản mới của component (với trạng thái đã được cập nhật) với phiên bản trước đó trong Virtual DOM. Quá trình này được gọi là reconciliation, nơi React xác định những phần nào của DOM cần được cập nhật.
• Cập nhật DOM: Dựa trên kết quả của quá trình reconciliation, React sẽ cập nhật DOM thực tế để phản ánh trạng thái mới của component.

3. Vòng đời của Component

Trong class components, việc gọi setState sẽ kích hoạt một số phương thức vòng đời:

• `shouldComponentUp...