Ngữ cảnh trong React

Trước khi chuyển sang nghiên cứu hook tiếp theo, chúng ta cần xem xét khái niệm ngữ cảnh trong React.

Thông thường chúng ta truyền dữ liệu từ các thành phần cha xuống các thành phần con bằng cách sử dụng props. Cách này tốt nếu bạn có ít thành phần và bạn không cần chuyển tiếp props từ thành phần cha xuống thành phần bạn cần thông qua các thành phần con hơn 2-3 lần.

Cách này cũng có thể trở nên cực kỳ bất tiện và dẫn đến các vấn đề khác nhau, nếu ở các thành phần trung gian, những props này hoàn toàn không được sử dụng (vấn đề như vậy được gọi là prop drilling), hoặc bạn cần truyền cùng một dữ liệu cho một số lượng lớn các thành phần.

Trong những trường hợp này, ngữ cảnh có thể giúp chúng ta, nó cho phép biến dữ liệu của thành phần cha trở nên khả dụng cho bất kỳ thành phần con nào, bất kể vị trí của nó trong cây thành phần, mà không cần truyền chúng qua props. Tương ứng, chỉ những thành phần nào cần dữ liệu mới sẽ nhận chúng.

Để sử dụng ngữ cảnh, cần phải tạo ra nó. Đầu tiên, hãy tạo tệp MyContext.js và nhập hàm createContext vào đó:

Bây giờ hãy tạo một đối tượng ngữ cảnh, ghi nó vào biến MyContext, cái mà chúng ta không được quên xuất khẩu. Trong trường hợp của chúng ta, chúng ta đã đặt giá trị ban đầu trong createContext là null, vì nó không quan trọng với chúng ta (có thể để dấu ngoặc trống đơn thuần). Giá trị mặc định được đặt sẽ xuất hiện khi đọc ngữ cảnh, nếu không tìm thấy bất kỳ giá trị nào khác. Giá trị này có thể là bất kỳ kiểu nào:

Trong bài học tiếp theo, chúng ta sẽ tạo một ứng dụng từ nhiều thành phần, được đặt trong các tệp riêng biệt. Nếu tất cả các thành phần đều trong một tệp, thì chúng ta cũng sẽ không tạo một tệp riêng cho việc tạo ngữ cảnh và không xuất khẩu nó.

Bây giờ hãy nhập MyContext.js vào thành phần rỗng App - vào thành phần mà từ đó chúng ta dự định truyền dữ liệu: