ReactJS - Sử dụng useContext: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn开发者 React! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng mạnh mẽ nhất của React: hook useContext. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi sẽ hướng dẫn bạn từng bước qua khái niệm này. Đừng lo lắng nếu bạn mới bắt đầu lập trình - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao!

Context là gì trong React?

Trước khi chúng ta nhảy vào useContext, hãy hiểu Context là gì trong React. Hãy tưởng tượng bạn đang tổ chức một bữa ăn gia đình lớn. Bạn có một loại nước sốt đặc biệt cần được truyền qua bàn ăn. Thay vì truyền nó từ người này sang người khác (giống như prop drilling trong React), liệu có dễ dàng hơn nếu bạn để nó ở giữa bàn để mọi người đều có thể với tới? Đó chính là điều Context làm trong React - nó cung cấp một cách để truyền dữ liệu qua cây component mà không cần phải truyền props手动 ở mỗi cấp độ.

Hiểu useContext

Bây giờ, useContext là một hook cho phép chúng ta dễ dàng sử dụng Context trong các component hàm của mình. Nó giống như cho mỗi người tại bàn ăn một cách trực tiếp để tiếp cận nước sốt đặc biệt mà không cần yêu cầu người khác truyền nó.

Định nghĩa của useContext

Hãy nhìn cách chúng ta sử dụng useContext:

const value = useContext(MyContext)

Dưới đây là ý nghĩa của từng phần:

• value: Đây là giá trị Context hiện tại
• MyContext: Đây là đối tượng Context (được tạo ra bằng React.createContext)

Đó là tất cả! Nhưng hãy cùng phân tích kỹ hơn với một ví dụ thực tế.

Sử dụng Context thông qua Hook

Hãy tạo một bộ chuyển đổi chủ đề đơn giản cho ứng dụng của chúng ta. Chúng ta sẽ sử dụng Context để lưu trữ chủ đề hiện tại và useContext để truy cập nó trong các component của mình.

Đầu tiên, hãy tạo Context của chúng ta:

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

Bây giờ, hãy tạo một component sử dụng Context này:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
I'm a {theme} themed button!
</button>
);
}

export default ThemedButton;

Trong ví dụ này, useContext(ThemeContext) cung cấp cho chúng ta giá trị chủ đề hiện tại. Chúng ta sau đó sử dụng giá trị này để thiết kế button của mình.

Bây giờ, hãy xem cách chúng ta có thể cung cấp Context này trong ứng dụng của mình:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Ở đây, chúng ta đang bao quanh ứng dụng của mình bằng ThemeContext.Provider và đặt giá trị là "dark". Điều này có nghĩa là bất kỳ component nào trong provider này đều có thể truy cập giá trị chủ đề này bằng useContext.

Cập nhật Context

Bây giờ, nếu chúng ta muốn cho phép người dùng chuyển đổi chủ đề, chúng ta có thể cập nhật giá trị Context. Hãy sửa đổi component App của chúng ta:

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Welcome to our themed app!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Bây giờ chúng ta đang sử dụng state để quản lý chủ đề, và chúng ta đã thêm một button để chuyển đổi nó. Khi chủ đề thay đổi, tất cả các component sử dụng useContext(ThemeContext) sẽ tự động re-render với giá trị mới.

Kết luận

Và thế là xong! Chúng ta đã bao quát các cơ bản của useContext trong React. Hãy tóm tắt lại các điểm chính:

1. Context cung cấp một cách để truyền dữ liệu qua cây component mà không cần prop-drilling.
2. useContext là một hook cho phép chúng ta dễ dàng sử dụng Context trong các component hàm.
3. Để sử dụng useContext, chúng ta cần tạo một Context trước bằng React.createContext.
4. Chúng ta có thể cập nhật Context bằng cách thay đổi giá trị của prop value của component Provider.

Nhớ rằng, mặc dù Context rất mạnh mẽ, nó không phải lúc nào cũng là giải pháp tốt nhất. Đối với các props đơn giản chỉ cần truyền qua một hoặc hai cấp độ, việc truyền props thông thường thường rõ ràng hơn. Hãy nghĩ của Context như nước sốt đặc biệt tại bữa ăn gia đình - sử dụng nó khi bạn cần chia sẻ điều gì đó rộng rãi, nhưng đừng lạm dụng!

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu rõ hơn về useContext. Hãy tiếp tục thực hành, và sớm bạn sẽ trở thành chuyên gia React Context! Chúc các bạn lập trình vui vẻ!

Phương thức	Mô tả
React.createContext	Tạo một đối tượng Context
useContext	Hook để sử dụng giá trị của Context
<Context.Provider>	Component để cung cấp giá trị Context cho các con của nó

Credits: Image by storyset