Giới thiệu về API ngữ cảnh React

React Context API là một công cụ quản lý trạng thái được sử dụng để chia sẻ dữ liệu giữa các thành phần React. Tìm hiểu cách sử dụng API ngữ cảnh để theo dõi người dùng đã xác thực trong các thành phần chức năng.

API ngữ cảnh của React là gì?

React là một thư viện dựa trên thành phần. Các ứng dụng của nó bao gồm các thành phần khác nhau hoạt động cùng nhau. Trong một số trường hợp, ứng dụng của bạn cần chia sẻ dữ liệu trên các thành phần này.

Ví dụ: bạn có thể muốn chia sẻ tên người dùng của người dùng hiện tại từ Đăng nhập thành phần cho các thành phần khác trong ứng dụng của bạn. Ngữ cảnh giúp chia sẻ tên người dùng dễ dàng hơn bằng cách loại bỏ nhu cầu truyền dữ liệu qua từng thành phần trong cây thành phần.

Khi nào bạn nên sử dụng API ngữ cảnh của React?

Trước khi sử dụng ngữ cảnh React, trước tiên, hãy xem xét loại dữ liệu bạn đang làm việc. Ngữ cảnh phù hợp hơn với dữ liệu tĩnh. Dữ liệu thay đổi liên tục sẽ gây ra quá nhiều lần hiển thị và kết quả là làm giảm hiệu suất. Dữ liệu cũng phải là toàn cầu hoặc ít nhất được sử dụng bởi nhiều thành phần, chẳng hạn như dữ liệu như ngôn ngữ người dùng, chủ đề và xác thực.

Sử dụng ngữ cảnh để theo dõi trạng thái xác thực người dùng

Nếu ứng dụng của bạn sử dụng xác thực, nhiều thành phần của nó sẽ cần biết trạng thái xác thực của người dùng hiện tại. Chuyển trạng thái xác thực cho từng thành phần là dư thừa và dẫn đến việc khoan lỗ, vì vậy sử dụng ngữ cảnh là một lựa chọn tốt.

createContext ()

Để bắt đầu với API ngữ cảnh, trước tiên bạn phải tạo nó bằng cú pháp này.

const Context = React.createContext(defaultValue);

Giá trị mặc định là không cần thiết và thường được sử dụng cho mục đích thử nghiệm.

Các nhà cung cấp

Mỗi ngữ cảnh có một trình cung cấp nhận một giá trị được sử dụng bởi các thành phần mà nó bao bọc. Nó cho phép các thành phần này đăng ký thay đổi ngữ cảnh.

<Context.Provider value={/* some value */}>

useContext

useContext () là một React hook cho phép các thành phần sử dụng ngữ cảnh. Bạn chỉ cần vượt qua trong ngữ cảnh.

const contextValue = useContext(Context)

Bây giờ chúng ta hãy tạo bối cảnh xác thực để theo dõi trạng thái xác thực.

Bắt đầu bằng cách tạo một tệp mới, AuthContext.js, và thêm phần sau.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

Tiếp theo, tạo AuthProvider.js và thêm chức năng nhà cung cấp.

import { useState, useEffect } from 'react';
import { getUser } from './auth.js'
import AuthContext from './AuthContext'
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
const currentUser = getUser()
setUser(currentUser)
}, []);
return (
<AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
);
};

Ở đây, bạn đang truy xuất người dùng hiện tại từ một người giả mạo getUser () chức năng. Trong một ứng dụng thực, đây sẽ là dịch vụ phụ trợ của bạn.

Lưu trữ người dùng ở trạng thái hiện tại để theo dõi bất kỳ thay đổi nào sau đó chuyển người dùng cho nhà cung cấp trong phần hỗ trợ giá trị.

AuthProvider.js cũng nhận được sự tiếp cận của trẻ em với bối cảnh.

Bước tiếp theo là tạo một hook tùy chỉnh sẽ cho phép các thành phần được bao bọc bởi trình cung cấp truy cập ngữ cảnh.

Tạo một tệp mới useAuthContext.js và thêm phần sau.

import AuthContext from "./AuthContext";
const useAuthContext.js = () => {
const user = useContext(AuthContext);
if (user === undefined) {
throw new Error("useAuthContext can only be used inside AuthProvider");
}
return user;
};

Bây giờ nếu mã bên ngoài nhà cung cấp gọi AuthContextứng dụng của bạn sẽ xử lý lỗi một cách duyên dáng.

Bước cuối cùng là bao bọc các thành phần bằng cách sử dụng ngữ cảnh với AuthProvider.js.

import { AuthProvider } from "./AuthContext";
ReactDOM.render(
<React.StrictMode>
<AuthProvider>
<App />
</AuthProvider>
</React.StrictMode>,
rootElement
);

Đây là một ví dụ về cách bạn sẽ sử dụng ngữ cảnh để bảo vệ một trang khỏi những người dùng chưa được xác thực.

import useAuthContext from "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profile = () => {
const { user } = useAuthContext();
if (!user) {
return <Navigate replace to="/login" />;
}
return (
<>
<h1>Profile</h1>
</>
);
};

Thành phần này hiển thị có điều kiện trang hồ sơ tùy thuộc vào trạng thái xác thực của người dùng. Nó kiểm tra xem người dùng có tồn tại hay không và nếu không, hãy chuyển hướng họ đến trang đăng nhập. Nếu không, nó sẽ hiển thị trang hồ sơ.

Khi nào không sử dụng API ngữ cảnh của React

Trong bài viết này, bạn đã học cách sử dụng Ngữ cảnh để theo dõi người dùng đã xác thực trên các thành phần. Mặc dù bạn có thể bị cám dỗ để sử dụng Ngữ cảnh cho tất cả các trường hợp sử dụng chia sẻ dữ liệu của mình, nhưng bạn không nên vì nó làm giảm khả năng bảo trì và hiệu suất mã. Mỗi khi giá trị ngữ cảnh thay đổi, mỗi thành phần sử dụng kết xuất trạng thái. Nếu dữ liệu chỉ được sử dụng bởi một vài thành phần, hãy chọn đạo cụ.

Đọc tiếp

Thông tin về các Tác giả