Giới thiệu

Ở trong React, dữ liệu sẽ được truyền từ trên xuống dưới (cha xuống con) thông qua props, điều này sẽ khác phức tạp nếu có nhiều components ở trong ứng dụng. React context cung cấp cho chúng ta cách để chia sẽ dữ liệu qua nhiều component mà không cần thông qua props.

Trước khi bạn sử dụng context

Context được sử dụng phổ biến khi có một vài data được truy cập bởi nhiều component lồng nhau bởi vì nó giúp cho component có thể tái sử dụng. Nếu bạn chỉ muốn tránh việc truyền nhiều một vài props qua nhiều lớp, component composition sẽ đơn giản hơn context.

Context API

1. React.createContext

const MyContext = React.createContext(defaultValue);

Tạo một context object, khi component được render, nó sẽ đăng ký context object và đọc giá trị hiện tại của context từ Provider, defaultValue chỉ được sử dụng khi component chưa khớp với Provider phía trên.

2. Context.Provider

<MyContext.Provider value={/* some value */}>

Provider component sử dụng value prop để truyền dữ liệu cho context đó. Một Provider có thể được truy cập bởi nhiều Consumer.

3. Context.Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

React component cho phép truy cập tới dữ liệu của context với một function component, value sẽ bằng với defaultValue của context.

Ví dụ

import React from "react";

export const CouterProvider = React.createContext({ value: 1 });

export default function CouterContext(props) {
  return (
    <CouterProvider.Provider value={1}>
      {props.children}
    </CouterProvider.Provider>
  );
}

import CounterContext, { CouterProvider } from "./Contexts/CounterContext";

export default function App() {
  return (
    <CounterContext>
      <div className="App">
        <CouterProvider.Consumer>
          {(value) => <p>{value}</p>}
        </CouterProvider.Consumer>
      </div>
    </CounterContext>
  );
}

Tổng kết

Thông qua bài biết, mong rằng mọi người có thể hiểu hơn về context trong React. Link doc: https://reactjs.org/docs/context.html