Tổ chức mã nguồn với React Hooks và Context

React là một thư viện JavaScript phổ biến cho phát triển giao diện người dùng. Để tăng tính tổ chức và quản lý mã nguồn hiệu quả, React cung cấp các công cụ như React Hooks và Context.

Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng Hooks và Context để tổ chức mã nguồn trong ứng dụng React và áp dụng các thực hành tốt nhất.

Sử dụng React Hooks để quản lý trạng thái

React Hooks là một tập hợp các hàm cho phép bạn sử dụng trạng thái và các tính năng React khác mà không cần sử dụng lớp. Điều này giúp viết mã ngắn gọn hơn và dễ đọc hơn. Ví dụ, chúng ta có thể sử dụng useState Hook để quản lý trạng thái trong một thành phần.

Dưới đây là một ví dụ:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Sự kết hợp của thành phần

Một trong những lợi ích của React là khả năng tái sử dụng các thành phần. Để tăng tính tổ chức, chúng ta có thể sử dụng các thành phần nhỏ hơn để xây dựng các thành phần lớn hơn. Điều này giúp chia nhỏ công việc và tạo ra mã nguồn dễ bảo trì.

Ví dụ, chúng ta có thể tạo một thành phần <Button> để sử dụng trong nhiều nơi trong ứng dụng của chúng ta:

import React from 'react';

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

export default Button;

Sử dụng Context để quản lý trạng thái toàn cục

Context là một cơ chế trong React cho phép chúng ta chia sẻ dữ liệu giữa các thành phần con mà không cần truyền qua các thành phần cha. Điều này giúp tránh việc truyền các thuộc tính dữ liệu qua nhiều cấp thành phần và giúp giảm độ phức tạp của mã nguồn.

Dưới đây là một ví dụ về việc sử dụng Context để chia sẻ ngôn ngữ hiện tại trong ứng dụng:

import React, { createContext, useContext, useState } from 'react';

const LanguageContext = createContext();

function App() {
  const [language, setLanguage] = useState('en');

  const changeLanguage = (newLanguage) => {
    setLanguage(newLanguage);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      <div>
        <Navbar />
        <Content />
      </div>
    </LanguageContext.Provider>
  );
}

function Navbar() {
  const { language, changeLanguage } = useContext(LanguageContext);

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>French</button>
      <button onClick={() => changeLanguage('es')}>Spanish</button>
      <p>Current language: {language}</p>
    </div>
  );
}

function Content() {
  const { language } = useContext(LanguageContext);

  return <p>This is the content in {language}.</p>;
}

export default App;

Trên đây là một số thực hành tốt nhất để tổ chức mã nguồn React bằng React Hooks và Context.