React useContext Hook là gì, khám phá ngay

Đầy đủ ví dụ

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);​

React useContext Hook là gì?

React Context là một cách để quản lý trạng thái trên toàn cầu.

Nó có thể được sử dụng cùng với useStateHook để chia sẻ trạng thái giữa các thành phần lồng vào nhau dễ dàng hơn so với useStatemột mình.

Trạng thái phải được giữ bởi thành phần mẹ cao nhất trong ngăn xếp yêu cầu quyền truy cập vào trạng thái.

Để minh họa, chúng ta có nhiều thành phần lồng nhau. Thành phần ở trên cùng và dưới cùng của ngăn xếp cần có quyền truy cập vào trạng thái.

Để thực hiện điều này mà không có Ngữ cảnh, chúng ta sẽ cần chuyển trạng thái dưới dạng "props" qua mỗi thành phần lồng nhau. Điều này được gọi là "kprop drilling".

Example:

Passing "props" through nested components:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  );
}

function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  );
}

function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

Giải pháp

Giải pháp là tạo bối cảnh.

Tạo bối cảnh

Để tạo ngữ cảnh, bạn phải Nhập createContextvà khởi tạo nó:

import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

import { useState, createContext, useContext } from "react";

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}