React 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 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.
Vấn đề
Trạng thái nên đượ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 "đạo cụ" qua mỗi thành phần lồng nhau. Đây được gọi là "khoan chống".
Thí dụ:
Chuyển "đạo cụ" qua các thành phần lồng nhau:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Mặc dù các thành phần 2-4 không cần trạng thái, chúng phải vượt qua trạng thái để nó có thể đến được thành phần 5.
Được chứng nhận!
$ 95 GHI DANH
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";
const UserContext = createContext()
Tiếp theo, chúng ta sẽ sử dụng Trình cung cấp ngữ cảnh để bao bọc cây các thành phần cần có trạng thái Ngữ cảnh.
Trình cung cấp ngữ cảnh
Gói các thành phần con trong Trình cung cấp ngữ 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 người dùng.
Sử dụng useContextmóc
Để sử dụng Context trong một thành phần con, chúng ta cần truy cập nó bằng cách sử dụng useContextHook.
Đầu tiên, hãy đưa useContextvà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>
</>
);
}
Đầy đủ ví dụ
Thí dụ:
Đây là ví dụ đầy đủ sử dụng React Context:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
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>
);
}
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>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));