Context React là gì
Quảng cáo Show
Home > Học ReactJS > Tự học ReactJS > Tìm hiểu về Context trong ReactJS Tìm hiểu về Context trong ReactJSTrong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Context trong ReactJS. Trong quá trình làm việc với ReactJS, các dữ liệu trong các component phải được chia sẻ với nhau. Chúng ta thực hiện điều này bằng cách đưa các dữ liệu này lên một nơi có tên là local state. Local state chịu trách nhiệm phân phối dữ liệu tới các component. Context hỗ trợ chúng ta thực hiện điều này một cách đơn giản. Quảng cáo 1. Context trong ReactJS là gì ?Theo tài liệu chính thức của ReactJS định nghĩa Context là : Context provides a way to pass data through the component tree without having to pass props down manually at every level. Chúng ta có thể hiểu:Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Context cung cấp cho chúng ta cách để thực hiện chia sẻ dữ liệu tới các component trong cây mà không cần truyền dữ liệu qua props theo từng cấp bậc. Quảng cáo Khi truyền dữ liệu tới các component bằng props thì bạn chỉ có thể truyền từ component cha sang component con. Nếu bạn muốn truyền sang component cháu hoặc sang component họ hàng xa thì điều này rất phức tạp. Bởi vậy context sẽ là kênh giao tiếp cho các component, cho phép bạn truyền dữ liệu một cách đơn giản hơn rất nhiều. Ở đây mình có một ví dụ, mình muốn chuyển lời nhắn từ Khi sử dụng truyền dữ liệu qua props thì mình bắt buộc phải gửi lời nhắn qua (Ông -> Cha -> Cháu ) import React from "react"; const ComponentChau = (props) => { return Ông bảo là "{props.message}"; }; const ComponentCha = (props) => { returnCòn nếu sử dụng Context thì chúng ta sẽ gửi trực tiếp từ Ông đến Cháu luôn : import React from "react"; const MessageContext = React.createContext(); class ComponentChau extends React.Component { render() { return Ông bảo là : "{this.context}"; } } ComponentChau.contextType = MessageContext; const ComponentOng = () => { return (Kết quả của 2 cách này vẫn tương tự nhưng việc sử dụng Context sẽ đơn giản hơn nhiều. Quảng cáo 2. Context API trong ReactJSTrước tiên, chúng ta sẽ đi tìm hiểu về Context API, sau đó sẽ đi vào ví dụ cụ thể nhé. Ở đây chúng ta có một vài API mà React cung cấp. React.createContext const MyContext = React.createContext(defaultValue);Khởi tạo một Context Object, giá trị của Context.Provider Mỗi Context Object phải đi kèm với một Context.Consumer |