โต้ตอบ useContext Hook
โต้ตอบบริบท
React Context เป็นวิธีการจัดการสถานะทั่วโลก
สามารถใช้ร่วมกับuseState
Hook เพื่อแชร์สถานะระหว่างส่วนประกอบที่ซ้อนกันอย่างลึกซึ้งได้ง่ายกว่า การใช้ useState
เพียงอย่างเดียว
ปัญหา
สถานะควรถูกเก็บไว้โดยองค์ประกอบหลักสูงสุดในสแต็กที่ต้องการเข้าถึงสถานะ
เพื่อให้เห็นภาพ เรามีองค์ประกอบที่ซ้อนกันอยู่มากมาย คอมโพเนนต์ที่ด้านบนและด้านล่างของสแต็กจำเป็นต้องเข้าถึงสถานะ
ในการทำเช่นนี้โดยไม่มีบริบท เราจะต้องส่งสถานะเป็น "อุปกรณ์ประกอบฉาก" ผ่านแต่ละองค์ประกอบที่ซ้อนกัน นี้เรียกว่า "การเจาะเสา"
ตัวอย่าง:
การส่ง "อุปกรณ์ประกอบฉาก" ผ่านส่วนประกอบที่ซ้อนกัน:
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"));
แม้ว่าองค์ประกอบ 2-4 จะไม่ต้องการสถานะ แต่ก็ต้องผ่านสถานะไปด้วยเพื่อที่จะไปถึงองค์ประกอบที่ 5
การแก้ไขปัญหา
วิธีแก้ไขคือการสร้างบริบท
สร้างบริบท
ในการสร้างบริบท คุณต้องนำเข้าcreateContext
และเริ่มต้น:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
ต่อไป เราจะใช้ Context Provider เพื่อล้อมแผนผังของส่วนประกอบที่ต้องการบริบทของสถานะ
ผู้ให้บริการบริบท
ห่อส่วนประกอบย่อยใน Context Provider และระบุค่าสถานะ
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
ตอนนี้ ส่วนประกอบทั้งหมดในแผนผังนี้จะสามารถเข้าถึงบริบทของผู้ใช้ได้
ใช้useContext
ตะขอ
ในการใช้บริบทในองค์ประกอบย่อย เราจำเป็นต้องเข้าถึงโดยใช้useContext
Hook
ขั้นแรก รวมuseContext
ไว้ในคำสั่งนำเข้า:
import { useState, createContext, useContext } from "react";
จากนั้นคุณสามารถเข้าถึงบริบทของผู้ใช้ในส่วนประกอบทั้งหมดได้:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ตัวอย่างเต็ม
ตัวอย่าง:
นี่คือตัวอย่างเต็มรูปแบบโดยใช้ 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"));