ReactJS: Tìm hiểu khái niệm Context (Phần 1)

Trong ứng dụng React, knowledge thường truyền từ trên xuống dưới thông qua props. Nhưng bí quyết này sẽ trở nên phức tạp đối sở hữu những loại dữ liệu international như locale, theme…, chúng ta cần truyền chúng qua nhiều lớp element để dùng. Context lúc này như vị cứu tinh của React: phân phối 1 bí quyết chia sẻ dữ liệu giữa những element như 1 biến international mà ko cần cần truyền props qua mỗi cấp element.

Bạn có cần dùng Context hay ko?

Lúc nào cần dùng Context?

Thông thường, chúng ta dùng 2 khái niệm “top-down-data-flow” và “Lifting state up” để truyền dữ liệu từ element cha tới con và cập nhật dữ liệu từ element con lên cha.

Fake sử chúng ta có 3 element A, B, C và lần lượt là con của nhau:

Ví dụ số lượng element lên tới hàng chục, chúng ta sẽ thấy việc truyền props như thế này sẽ trở nên dài dòng, dư code và khó quản lý. Ngay cả lúc những element con trung gian ko dùng tới props, nó cũng cần nhận props từ element cha để chuyển xuống element con của nó lúc cần.

Ấy là lý do mà React Context ra đời để giải quyết vấn đề nhập nhằng này!

Ý tưởng của Context là: tập trung lưu dữ liệu (props) ở 1 nơi. Sau đấy React sẽ phân phối những API để những element có thể lấy props đấy quản lý mà ko cần qua những element trung gian.

Xem Thêm  Coin98 Tremendous App là gì? Siêu ứng dụng tiền mã hóa hàng đầu

Context được thiết kế để chia sẻ dữ liệu như 1 biến international cho 1 cây element. Dí dụ những giá trị như authenticated consumer (thông tin người mua lúc đăng nhập), theme, languages… được dùng thường xuyên ở những tầng React element.

Lúc khởi đầu sở hữu 1 dự án dù lớn hay bé, chúng ta nên dùng Context từ ban đầu. Sau này có lẽ dự án sẽ vươn lên là lớn hơn, nhiều element hơn, lúc đấy việc truyền props qua từng element sẽ siêu phiền phức.

Ưu – nhược điểm của Context

So sở hữu luồng quản lý thông thường, Context có những ưu – nhược điểm nhất định.

Ưu điểm

  • Giảm thiểu code dư thừa lúc 1 element nhận props nhưng ko dùng tới.
  • Giảm thiểu việc lặp code lúc gọi 1 props cho nhiều element.
  • Quản lý dữ liệu ở 1 nơi giúp việc truy xuất và cập nhật dễ dàng.

Nhược điểm

  • Khó tái dùng lại element vì dữ liệu tập trung 1 chỗ.

Phương pháp dùng Context (Context API)

React phân phối những Context API để tạo Context, lấy giá trị của Context cho những loại element:

  • React.createContext
  • Context.Supplier
  • Class.contextType
  • Context.Client
  • Context.displayName

React.createContext

API này cho phép khởi tạo 1 đối tượng Context.

// defaultValue là giá trị được khởi tạo mặc định lúc đầu của MyContext const MyContext = React.createContext(‘defaultValue‘);

Dưới đây là đối tượng Context được khởi tạo, sở hữu những thuộc tính Supplier, Client đi kèm như 1 element:

Giá trị defaultValue này được dùng lúc 1 element ko được bọc bởi element Context.Supplier. Nó hữu ích cho việc kiểm thử element độc lập mà ko cần cần bọc chúng lại.

Xem Thêm  Token Vesting Course of - Tại sao đây là 1 giải pháp tuyệt vời ?

Context.Supplier

Mỗi đối tượng Context đều đi cùng sở hữu 1 Supplier như 1 React element.

<MyContext.Supplier worth={/* some worth */}>{kids}</MyContext.Supplier>

Part <Supplier> nhận 1 props là “worth” để truyền tới element con (có thể được bọc bởi <Client> hoặc ko). Giá trị của props này ko phụ thuộc vào phương thức shouldComponentUpdate của lifecycle updating.

1 element <Supplier> có thể chứa nhiều element <Supplier> và <Client> lồng nhau.

Class.contextType

Thuộc tính contextType được dùng cho những class element. Thuộc tính này được gán vào đối tượng Context khai báo bằng React.createContext().

Ta lấy giá trị props “worth” của element <Supplier> thông qua cú pháp this.context, ta có thể dùng nó trong mọi phương thức của lifecycle:

class MyClass extends React.Part { componentDidMount() { let worth = this.context; /* … */ } componentDidUpdate() { let worth = this.context; /* … */ } componentWillUnmount() { let worth = this.context; /* … */ } render() { let worth = this.context; /* … */ } } MyClass.contextType = MyContext;

Bên cạnh ra, chúng ta cũng có thể dùng từ khóa static để dùng contextType bên trong class element:

const MyContext = React.createContext(‘defaultValue’); class MyClass extends React.Part { static contextType = MyContext; render() { let worth = this.context; <h1 className={worth}>Wiki Tino</h1> } }

this.context chỉ trỏ tới 1 context duy nhất. Giá trị mặc định của nó là đối số “defaultValue” lúc khởi tạo Context.

Ví dụ muốn dùng nhiều context khác, chúng ta cần dùng “Consuming A number of Context”.

Context.Client

Để lấy giá trị props “worth” của element <Supplier> trong 1 operate element, ta dùng element Client.

Perform element nhận giá trị “worth” của <Supplier> sắp nhất trong những tầng element và trả về React component.

Xem Thêm  Witnet (WIT) là gì? Toàn tập về tiền điện tử WIT Token

const FunctionComponent = (props) => ( <MyContext.Client> {(val) => <span className={val}>Perform Part</span>} </MyContext.Client> );

Ví dụ MyContext này ko có Supplier thì tham số val sẽ là đối số defaultValue truyền vào createContext().

Context.displayName

Sau lúc 1 Context được khởi tạo bởi createContext(), nó nhận 1 thuộc tính displayName kiểu string (chuỗi).

React DevTools sẽ dùng chuỗi này để hiển thị lại tên Context. Điều này hữu ích cho việc debug.

const MyContext = React.createContext(/* vài giá trị */); MyContext.displayName = ‘MyDisplayName’; <MyContext.Supplier> // “MyDisplayName.Supplier” in DevTools <MyContext.Client> // “MyDisplayName.Client” in DevTools

Tổng kết

Chúng ta đã đi tìm hiểu xong khái niệm và những API liên quan tới React Context. Bài viết sau chúng ta sẽ đi vào thí dụ thực tế dùng React Context như thế nào nhé !

Cám ơn quý khách đã ghé thăm bài viết này!

Xem bài viết sau tại: ReactJS: Tìm hiểu khái niệm Context (Phần 2)

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • Electronic mail: gross [email protected]
  • Web site: www.tino.org