[React Hook] useState

Thật kỳ lạ, cộng đồng React rất thích những thứ có tiền tố 'use'

useServer, useCallback, useState, useMemo, v.v.

Ngay cả các hook tùy chỉnh cũng đều có tiền tố 'use'

Nguồn gốc của nó bắt đầu từ đâu vậy?

useState là một hook nổi tiếng.

Nó dùng để lưu trữ giá trị trạng thái và thực hiện render lại khi giá trị này thay đổi. Rất đơn giản.

Đó là ví dụ mà ai cũng biết.

Vậy phạm vi render lại khi giá trị trạng thái thay đổi là gì?

Chỉ có thẻ p? Hay cả thẻ button?

Câu trả lời là toàn bộ thành phần nơi useState được gọi.

ExampleComponent sẽ được render lại, nhưng

Virtual DOM sẽ được sử dụng để so sánh các giá trị và chỉ sửa đổi DOM ở những nơi cần thiết.

useState được gọi ở mỗi lần render lại, vậy giá trị được lưu trữ như thế nào?

Câu trả lời nằm ở cấu trúc của useState.

Đây là mã nguồn của useState trong React.

Nó lấy dispatcher từ đối tượng toàn cục và gọi useState.

Tuy nhiên, cấu trúc vẫn chưa rõ ràng.

Nếu đào sâu hơn, ta sẽ thấy mã sau.

Nó lấy hook, tạo hàm set bằng cách bind queue trong hook vào hàm dispatchSetState và trả về.

(Bind dùng để bind this vào một hàm đã cho, các đối số còn lại sẽ được sử dụng làm đối số của hàm đó và trả về một hàm mới với this đã được bind).

Tuy nhiên, lý do vẫn chưa rõ ràng.

Hãy đào sâu hơn nữa.

Ta có thể thấy rằng giá trị ban đầu được gán trong mỗi lần gọi. Điều này không giải thích được cách giá trị được lưu trữ.

Hãy đào sâu hơn nữa. Hook có vẻ đáng ngờ.

currentlyRenderingFiber và workInProgressHook là các biến toàn cục.

Nó sử dụng việc gán từ phải sang trái để triển khai danh sách liên kết.

Vì vậy, cấu trúc hook dự kiến sẽ như sau.

Các giá trị được thêm vào đầu danh sách.

Sau khi xem xét các triển khai useState khác, ta thấy

Không phải tất cả đều gọi mountState, mà chúng gọi updateState và rerenderState khi render lại.

Vì vậy, cấu trúc vẫn như trên và các hàm khác sẽ được gọi khi có sự kiện.

Nếu bạn muốn xem mã nguồn, hãy tham khảo react/packages/react-reconciler/src/ReactFiberHooks.js.