Context-API trong ReactJS, Tại sao và Làm thế nào?
Tại sao sử dụng Context-API?
- Để underStand Tại sao sử dụng Context-API Đầu tiên chúng ta sẽ xem Props-Drilling là gì .
- Nhìn vào hình ảnh cây thành phần bên trái.
- Có thể có trường hợp Thành phần con ở cuối cây sẽ cần dữ liệu. Tuy nhiên, Thành phần vùng chứa hoặc Thành phần con ở giữa có thể không cần Dữ liệu đó.
- Trong trường hợp này, mặc dù Thành phần giữa không cần dữ liệu, nhưng chúng cần nhận nó chỉ để chuyển nó cho Thành phần con.
- Nếu Ứng dụng của Bạn quá lớn thì Điều này sẽ gây ra một vấn đề lớn. Các nhà phát triển cần tiếp tục chuyển dữ liệu từ thành phần này sang thành phần tiếp theo.
- Vấn đề này được gọi là Props Drilling.
- Trong Context-API, một không gian lưu trữ riêng biệt được tạo bên ngoài cây Thành phần mà chúng ta phải lưu trữ dữ liệu.
- Bây giờ nếu chúng ta cần dữ liệu đó bên trong bất kỳ thành phần nào, chúng ta có thể truy cập trực tiếp dữ liệu từ Context-API.
- Bây giờ chúng ta hãy xem cách này hoạt động với một ví dụ.
- Để CreateContext, chúng ta có thể sử dụng createContext () của React.
- Khi UserContext được tạo, chúng ta phải xuất nó.
- Bây giờ để thêm Dữ liệu bên trong Ngữ cảnh, chúng ta phải bọc phần tử mẹ bằng <UserContext.Provider> hoặc <UserProvider>.
- khi chúng ta bọc bằng Wrapper thì chúng ta phải chuyển dữ liệu vào thuộc tính giá trị .
1) Trong Thành phần chức năng.
2) Trong các phương pháp vòng đời của thành phần lớp.
3) Trong phương pháp kết xuất của thành phần lớp.
1) Trong thành phần chức năng: -
- Bên trong Thành phần chức năng hoặc Hooks, chúng ta phải sử dụng gói useContext () Hook do React cung cấp.
- Bây giờ chúng ta phải nhập UserContext và chuyển nó vào useContext () .
- useContext (UserContext) sẽ trả về Dữ liệu người dùng bên trong Context. mà chúng ta có thể sử dụng thêm.
- Cách phổ biến nhất để truy cập Context từ một thành phần lớp là thông qua static
contextType. - Nếu bạn cần giá trị từ Context bên ngoài
renderhoặc trong một phương thức vòng đời, bạn sẽ sử dụng nó theo cách này.
- Cách truyền thống để truy xuất các giá trị Context là bằng cách gói thành phần con trong
Consumer. - Từ đó, bạn sẽ có thể truy cập vào giá trị hỗ trợ như
props. - Bạn có thể vẫn thấy điều này, nhưng đó là một cách cũ hơn để truy cập vào Ngữ cảnh.
Suggested posts
Tránh những hậu quả tàn khốc của đột quỵ: Học hỏi từ hành trình của một gia đình.
Giới thiệu Đột quỵ là một trường hợp cấp cứu y tế có thể tấn công bất kỳ ai vào bất kỳ lúc nào. Nó xảy ra khi lưu lượng máu đến một phần của não bị gián đoạn, dẫn đến mất chức năng não đột ngột.
Jest — Khung kiểm tra JavaScript mạnh mẽ
Kiểm thử là một phần thiết yếu của quá trình phát triển phần mềm. Nó đảm bảo rằng mã đáng tin cậy, hoạt động như mong đợi và giảm khả năng xảy ra lỗi.
Related posts
Cuộc đàn áp các Kitô hữu: Tội ác thù hận mà chúng ta không nói đến
Quên bài Hồi giáo đi: Cơ đốc nhân (và người Do Thái) là nạn nhân chính của tội ác căm thù tôn giáo.
Bất kỳ lý trí nào cũng biết rằng giới chính trị và truyền thông bị chi phối bởi cánh tả, thậm chí là cực tả, một tình trạng tạo ra sự mất cân bằng trong diễn ngôn chính trị. Trong lĩnh vực tôn giáo, sự mất cân bằng này có thể thấy rõ ràng: các tờ báo và mạng lưới cánh tả không vội vàng bảo vệ đức tin Cơ đốc.
Cuộc trò chuyện nguy hiểm
Nếu chúng ta muốn tiếp tục phát triển trên hành tinh này, chúng ta sẽ phải có những cuộc đối thoại nguy hiểm. Những thứ thách thức những gì chúng ta đã làm, những gì chúng ta đang làm và những gì chúng ta hiện đang chuẩn bị tiếp tục làm (hoặc đang có kế hoạch làm).
Mối đe dọa đó Lưu trữ: Tập 7 Black Basta
Trong thế giới kết nối ngày nay, mối đe dọa tấn công mạng phổ biến hơn bao giờ hết. Tội phạm mạng và các tác nhân quốc gia liên tục tìm cách khai thác các lỗ hổng và đánh cắp dữ liệu có giá trị, gây rủi ro đáng kể cho các tổ chức thuộc mọi quy mô.
Hai năm trong ngành thiết kế- Tốt, xấu và xấu…
“Này Siri, chơi Me Dive của Olivia Dean.” Đó là tháng 5 năm 2021 khi tôi bắt đầu thực tập tại Học viện Tương lai Châu Phi ở Akure, Nigeria.