Sử dụng context trong React

Sử dụng context trong React để truyền các giá trị cho component theo cách dễ dàng hơn trong các ứng dụng có nhiều cấp component.

Context trong React

Trong ứng dụng ReactJS, dùng context để truyền dữ liệu đến nhiều component trong toàn bộ cây component rất dễ dàng. Dữ liệu trong context được truyền xuống các component con tự động mà không phải truyền qua từng cấp component. Do đó có thể dùng context để xử lý các dữ liệu global như user info, cart…

Tạo context trong react

Để sử dụng context trong ứng dụng react, đầu tiên là bạn tạo context. Thực hiện bằng cách tạo file .js. Sử dụng hàm createContext và export kết quả nhận được:

//dataContext.js
import { createContext } from 'react';
export const dataContext = createContext(1);

Hàm createContext trả về đối tượng context. Hàm có 1 tham số là giá trị mặc định khởi đầu trong context (ví dụ trên là 1) . Giá trị mặc định này có kiểu dữ liệu là số, string, array, object… đều được

Context Provider

Sau khi tạo context xong, việc tiếp theo là bạn bao quanh các component con trong ứng dụng (các component sẽ dùng context) bởi một Context Provider và gán thuộc tính value như sau :

//App.js
import { useContext } from 'react';
import { Header } from './Header';
import { Nav } from './Nav';
import { Main } from './Main'
import { dataContext } from './dataContext';
const data = { tygia: 25000, pageSize:10, cart:[]}
function App() {return (
    <dataContext.Provider value={data} >
      <div style={{ width:'1200px', margin:'auto' }}>
        <Header/>
        <Nav />
        <Main/>
      </div>
    </dataContext.Provider>
)}
export default App;

Với việc khai báo như trên, các component Header, Nav, Main, và các component con của chúng đều có thể truy xuất dữ liệu trong context để dùng.

Sử dụng context 

Cuối cùng là việc sử dụng context trong các component con. Sử dụng bằng cách dùng useContext hook. Mời xem ví dụ sau trong một component con Header:

//Header.js
import { useContext } from 'react';
import { dataContext } from './dataContext';
export function Header(){ 
    const d = useContext(dataContext); 
    // d = { tygia: 25000, pageSize:10, cart:[]}
    return (
    <div style={{background:'darkcyan', color: 'white'}}>
        <h2>HEADER WEBSITE </h2> Tỷ giá: {d.tygia}
    </div>
)}

Tham số của hàm useContext là đối tượng context đã tạo trước đó. Khi đó kết quả trả về của useContext là dữ liệu data đã truyền từ component gốc ở trên. Giờ thì trong component con có thể dùng dữ liệu context bình thường.

Sử dụng context trong conponent con là Main cũng tương tự như trong Header

//Main.js
import { SPNoiBat } from "./SPNoiBat"
import { useContext } from 'react';
import { dataContext } from './dataContext';
export function Main(){
    const d = useContext(dataContext);
    return (
    <div style={{ border:'2px solid cyan', padding:'20px'}}>
        Main. Tỷ giá {d.tygia} 
        <SPNoiBat></SPNoiBat>
    </div>
)}

Trong Main có nhúng component SPNoiBat. Việc sử dụng context trong “cháu nội” cũng không khác:

//SPNoibat.js
import { SPChiTiet } from './SPChiTiet';
import { useContext } from 'react';
import { dataContext } from './dataContext';
export function SPNoiBat(){ 
    const d = useContext(dataContext);
    return (
    <div style={{border:'2px solid blue',padding:'10px' }}>
        Sản phẩm nổi bật. Tỷ giá {d.tygia} 
        <SPChiTiet sp={{tensp:'Acer I7829 I3', gia:750}}/>
        <SPChiTiet sp={{tensp:'Asus T7W9 I5', gia:900}}/>
        <SPChiTiet sp={{tensp:'HP A794 I3', gia:800}}/>
        <hr/>
    </div>
)}

Trong component SPNoiBat, có nhúng SPChiTiet, việc sử dụng context trong component ‘”cháu cố” SPChiTiet như đã biết

//SPChiTiet.js
import { useContext } from 'react';
import { dataContext } from './dataContext';
export function SPChiTiet(props){ 
    const d = useContext(dataContext);
    return (
    <div style={{'border':'1px solid red'}}>
        Chi tiết sản phẩm.  Tỷ giá {d.tygia}
        <p>Tên SP: { props.sp.tensp}. Giá {props.sp.gia*d.tygia} VNĐ</p>
    </div>
)}

Bạn thấy thế nào? Việc sử dụng context trong React rất dễ phải không. Ở component gốc, truyền dữ liệu xuống các component con cháu để chúng xài thoải mái, nếu không có context, bạn phải dùng props để truyền qua từng cấp component sẽ cực hơn, hoặc sử dụng redux cũng cực hơn.

So sánh redux và context

Context và redux là hai cách thức để bạn có thể truyền, dùng chung data giữa các component. Dùng redux thì cực hơn context (code nhiều hơn) , nhưng redux nhiều resource , plugin hơn , debug cũng tốt hơn context. Dùng context thì đơn giản và không cần phải cài thêm thư viện vào ứng dụng.

Cần xem thêm tài liệu thì đọc các trang này:

BÀI VIẾT LIÊN QUANXEM THÊM