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

Xin chào các bạn nhà phát triển tương lai! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của ReactJS Context. Là người thầy máy tính gần gũi của bạn, tôi ở đây để hướng dẫn bạn qua khái niệm này với cùng niềm的热情 tôi đã có khi lần đầu tiên học nó. Vậy, hãy lấy饮料 yêu thích của bạn, nằm xuống thoải mái, và cùng nhau bắt đầu hành trình thú vị này!

Context là gì trong React?

Hãy tưởng tượng bạn đang tham gia buổi聚会 gia đình, và bạn muốn chia sẻ một câu chuyện hài với mọi người. Thay vì thì thầm nó cho từng người một, có phải sẽ tuyệt vời hơn nếu bạn chỉ cần công bố nó một lần, và mọi người đều có thể nghe thấy? Đó chính xác là điều Context làm trong React!

Context cung cấp một cách để truyền dữ liệu qua cây thành phần mà không cần phải truyền props thủ công ở mọi cấp độ. Nó được thiết kế để chia sẻ dữ liệu có thể coi là "toàn cục" cho một cây thành phần React.

Khi nào nên sử dụng Context

Trước khi chúng ta đi sâu hơn, hãy hiểu khi nào nên sử dụng Context:

1. Khi bạn có dữ liệu cần truy cập bởi nhiều thành phần ở các cấp độ khác nhau.
2. Khi bạn muốn tránh "prop drilling" (truyền props qua các thành phần trung gian không cần dữ liệu).

Tạo và sử dụng Context

Hãy cùng đi qua quy trình tạo và sử dụng Context với một số ví dụ mã.

Bước 1: Tạo một Context

Trước tiên, chúng ta cần tạo một Context. Chúng ta sẽ sử dụng phương thức React.createContext() cho điều này.

import React from 'react';

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

export default ThemeContext;

Trong ví dụ này, chúng ta đã tạo một ThemeContext với giá trị mặc định là 'light'. Giá trị mặc định này được sử dụng khi một thành phần không có một Provider phù hợp ở trên nó trong cây.

Bước 2: Cung cấp Context

Bây giờ chúng ta có Context của mình, chúng ta cần cung cấp nó cho cây thành phần. Chúng ta làm điều này bằng cách sử dụng thành phần Context.Provider.

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

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

Trong ví dụ này, chúng ta đang bao bọc thành phần Toolbar (và theo đó, tất cả các con của nó) bằng ThemeContext.Provider. Chúng ta đặt giá trị là "dark", điều này sẽ khả dụng cho tất cả các thành phần trong Provider này.

Bước 3: Sử dụng Context

Bây giờ đến phần thú vị - sử dụng Context của chúng ta! Có hai cách để tiêu thụ Context:

1. Class.contextType
2. Context.Consumer

Hãy xem xét cả hai:

Sử dụng Class.contextType

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

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Tôi là một nút có chủ đề!</button>;
}
}

Trong ví dụ này, ThemedButton là một thành phần lớp. Chúng ta đã đặt contextType của nó là ThemeContext. Bây giờ, this.context sẽ cung cấp cho chúng ta quyền truy cập vào giá trị context hiện tại.

Sử dụng Context.Consumer

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Tôi là một nút có chủ đề!</button>}
</ThemeContext.Consumer>
);
}

Ở đây, chúng ta đang sử dụng thành phần Context.Consumer. Nó sử dụng một render prop để truyền giá trị context hiện tại cho một hàm.

Sử dụng nhiều Context

Đôi khi, bạn có thể cần sử dụng nhiều Context. React cho phép bạn lồng nhau nhiều Context Providers:

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

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

Và bạn có thể tiêu thụ nhiều context như sau:

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} đang sử dụng chủ đề {theme}
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Cập nhật Context

Context cũng có thể thay đổi. Hãy xem một ví dụ nơi chúng ta cập nhật chủ đề của mình:

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

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

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Chuyển đổi chủ đề
</button>
</ThemeContext.Provider>
);
}

Trong ví dụ này, chúng ta đang sử dụng hook useState để quản lý trạng thái chủ đề của mình. Chúng ta truyền cả giá trị chủ đề hiện tại và hàm setTheme trong giá trị context.

Phương thức Context

Dưới đây là bảng tóm tắt các phương thức Context chính mà chúng ta đã xem xét:

Phương thức	Mô tả
React.createContext()	Tạo một Context đối tượng
Context.Provider	Cung cấp một giá trị context cho các thành phần
Class.contextType	Cho phép các thành phần lớp tiêu thụ một context đơn
Context.Consumer	Cho phép các thành phần hàm đăng ký vào một context

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của React Context, từ việc tạo ra nó đến việc tiêu thụ và cập nhật nó. Context là một công cụ mạnh mẽ trong React, cho phép bạn tránh được prop drilling và quản lý trạng thái toàn cục một cách hiệu quả.

Nhớ rằng, như bất kỳ công cụ nào khác, Context không phải lúc nào cũng là giải pháp đúng đắn. Trong các trường hợp đơn giản hơn, props có thể vẫn là lựa chọn tốt nhất. Nhưng khi bạn cần chia sẻ dữ liệu qua nhiều thành phần ở các cấp độ khác nhau, Context có thể là người bạn mới của bạn.

Tiếp tục thực hành, tiếp tục lập trình, và quan trọng nhất, hãy luôn vui vẻ! Đến gặp lại các bạn vào lần sau, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset