Phản ứng useContext Hook
Bối cảnh phản ứng
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 useState
Hook để chia sẻ trạng thái giữa các thành phần được lồng sâu dễ dàng hơn so với chỉ useState
.
Vấn đề
Trạng thái phải được nắm giữ bởi thành phần cha 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.
Để làm điều này mà không cần Ngữ cảnh, chúng ta sẽ cần chuyển trạng thái dưới dạng "đạo cụ" qua từng thành phần lồng nhau. Điều này được gọi là "khoan chống đỡ".
Ví dụ:
Truyền "đạo cụ" qua các thành phần lồng nhau:
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 />);
Mặc dù các thành phần 2-4 không cần trạng thái nhưng chúng vẫn phải chuyển trạng thái để có thể tiếp cận thành phần 5.
Được chứng nhận!
$95 ĐĂNG KÝ
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 createContext
và khởi tạo nó:
import { useState, createContext } from "react"; import ReactDOM from "react-dom/client"; const UserContext = createContext()
Tiếp theo, chúng ta sẽ sử dụng Trình cung cấp bối cảnh để bao bọc cây gồm các thành phần cần Trạng thái bối cảnh.
Nhà cung cấp bối cảnh
Bao bọc các thành phần con trong Nhà cung cấp bối cảnh và cung cấp giá trị trạng thái.
function Component1() { const [user, setUser] = useState("Jesse Hall"); return ( <UserContext.Provider value={user}> <h1>{`Hello ${user}!`}</h1> <Component2 user={user} /> </UserContext.Provider> ); }
Bây giờ, tất cả các thành phần trong cây này sẽ có quyền truy cập vào Ngữ cảnh của người dùng.
Sử dụng hook useContext
Để sử dụng Context trong một thành phần con, chúng ta cần truy cập nó bằng useContext
Hook.
Đầu tiên, đưa useContext
vào câu lệnh nhập:
import { useState, createContext, useContext } from "react";
Sau đó, bạn có thể truy cập Ngữ cảnh người dùng trong tất cả các thành phần:
function Component5() { const user = useContext(UserContext); return ( <> <h1>Component 5</h1> <h2>{`Hello ${user} again!`}</h2> </> ); }
Ví dụ đầy đủ
Ví dụ:
Đây là ví dụ đầy đủ sử dụng React Context:
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 />);