useContextlà một trong những hooks cơ bản của React, được sử dụng để truyền dữ liệu giữa các thành phần con trong cây thành phần của ứng dụng. Nó cho phép tránh việc truyền các props qua nhiều cấp thành phần, giúp làm cho mã nguồn của bạn trở nên sáng sủa hơn.
Sử dụng useContext, chúng ta có thể truy cập trực tiếp vào bất kỳ đối tượng Context nào trong cây thành phần của ứng dụng, và lấy các giá trị mà nó cung cấp cho các thành phần con.
Cách setup useContext trong React Js
Để sử dụng useContext, trước hết bạn cần tạo một đối tượng Context để chứa các giá trị bạn muốn chia sẻ cho các thành phần con. Để làm điều này, bạn có thể sử dụng hàm createContext() của React như sau:
import React, { useContext } from 'react';
import MyContext from './MyContext';
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> MyComponent() {
const contextValue = useContext(MyContext);
// sử dụng giá trị trong contextValue ở đây
}
Ở đây, useContext(MyContext) sẽ trả về giá trị hiện tại của Context được cung cấp bởi Provider bao bọc thành phần hiện tại.
Ví dụ về useContext
import React, { useContext } from "react";
const ThemeContext = React.createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return (
<div>
<button style={{ background: theme }}>Click me</button>
</div>
);
}
Trong ví dụ trên, chúng ta đã tạo một Context với tên là ThemeContext bằng cách sử dụng React.createContext. Sau đó, chúng ta đã cung cấp giá trị dark cho Context này thông qua việc sử dụng ThemeContext.Provider trong component App.
Cuối cùng, chúng ta đã sử dụng useContext để lấy giá trị của Context đó và áp dụng nó vào một thuộc tính của button. Khi button được hiển thị, nó sẽ có background màu đen, tương ứng với giá trị dark được cung cấp cho ThemeContext.Provider.
Kết luận và bài viết có liên quan
Bài viết có liên quan:
Tìm hiểu useContext với Redux.
Tìm hiểu useSelector trong Redux
Sử dụng axios để gọi một API trong React Js
useEffect và cách sử dụng useEffect trong ReactHooks
