Những cách dùng React tốt nhất trong năm 2023

React có rất nhiều cách sử dụng. Dưới đây là những cách dùng React tốt nhất mà bạn nên theo trong năm 2023.

React là một trong số framework front-end phổ biến nhất cho JavaScript. Không giống những framework như Angular, nó rất đơn giản. Về cơ bản, cách viết hay cấu trúc code React như thế nào tùy thuộc vào bạn.

Quantrimang.com sẽ tổng hợp cho bạn những cách dùng React tốt nhất mà bạn nên theo để cải thiện kết quả dự án đang phát triển.

Dùng các thành phần chức năng và hook thay cho class

Ở React, bạn có thể dùng class hoặc thành phần chức năng với hook. Tuy nhiên, bạn nên dùng các thành phần chức năng và hook thường xuyên hơn bởi chúng cho code chính xác và dễ đọc hơn hẳn.

Xét thành phần class hiện dữ liệu từ NASA API sau:

class NasaData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
  }

  render() {
    const { data } = this.state;

    if (!data.length)
      return (
        <div>
          <h1> Fetching data.... </h1>{" "}
        </div>
      );

    return (
      <>
        <h1> Fetch data using Class component </h1>{" "}
        {data.map((item) => (
          <div key={item.id}>{item.title}</div>
        ))}
      </>
    );
  }
}

Bạn có thể viết lại code trên bằng hook:

const NasaData = () => {
  const [data, setdata] = useState(null);

  useEffect(() => {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        setdata(json);
      });
  }, [data]);

  return (
    <>
      <h1> Fetch data using Class component </h1>{" "}
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </>
  );
};

Dù khối code trên giống như code viết bằng class nhưng nó đơn giản, ít phức tạp và dễ hiểu hơn.

Tránh dùng state nếu có thể

State trong React theo dõi dữ liệu mà khi thay đổi sẽ kích hoạt thành phần React để kết xuất lại. Khi xây dựng app React, tránh dùng state nhiều nhất có thể vì càng dùng nhiều state, bạn phải theo dõi càng nhiều dữ liệu trên app.

Một cách để giảm thiểu dùng state là chỉ khai báo nó khi cần. Ví dụ, nếu đang tìm nạp dữ liệu người dùng từ API, lưu trữ đối tượng người dùng trong state thay cho các thuộc tính riêng lẻ.

Thay vì viết:

const [username, setusername] = useState('')
const [password, setpassword] = useState('')

Hãy code như sau:

const [user, setuser] = useState({})

Sắp xếp file liên quan tới cùng thành phần trong một thư mục

Khi quyết định trên một cấu trúc thư mục cho app React, hãy chọn cấu trúc tập trung vào thành phần. Điều này có nghĩa toàn bộ file liên quan sẽ được lưu trữ trong một thư mục.

Ví dụ, nếu làm một thành phần Navbar, hãy tạo thư mục Navbar chứa file thành phần, style sheet và JavaScript khác, cùng các file asset được dùng trong thành phần đó.

Một thư mục đơn lẻ chứa tất cả file thành phần khiến nó dễ dàng tái sử dụng, chia sẻ và gỡ lỗi. Nếu cần thấy cách một thành phần hoạt động, bạn chỉ phải mở một thư mục.

Tránh dùng index làm key prop

React dùng key để xác định các mục duy nhất trong một mảng. Với key, React có thể xác định mục đã được thay đổi, thêm hoặc loại bỏ nó khỏi mảng.

Khi hiển thị mảng, bạn có thể dùng index làm key.

const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={index}>{elem}</li>;
      })}
    </>
  );
};

Dù đôi khi cách trên hoạt động, dùng index làm key có thể phát sinh lỗi, nhất là lúc cần thay đổi danh sách. Hãy thử lên danh sách như sau:

const arr = ["item1", "item2", "item3", "item4", "item5"];

Hiện tại, mục danh sách đầu tiên “Item1” ở chỉ mục 0, nhưng nếu đã thêm mục khác vào phần đầu của danh sách, index “Item1” sẽ chuyển sang 1. Điều này thay đổi hành vi của mảng.

Giải pháp ở đây là dùng một giá trị duy nhất làm chỉ mục để đảm bảo danh tính của mục trong danh sách được duy trì.

Lựa chọn phân mảnh thay cho div nếu có thể

Thành phần React cần trả về code được đóng gói trong một tag thường là <div> hoặc một React. Bạn nên chọn phân mảnh tại nơi có thể.

Dùng <div> tăng kích thước DOM, nhất là ở các dự án lớn vì bạn càng có nhiều tag hay node DOM, web của bạn càng cần nhiều bộ nhớ và trình duyệt càng “ngốn” RAM để tải web. Điều này dẫn tới việc tải trang chậm, gây khó chịu cho người dùng.

Một ví dụ về việc xóa tag <div> không cần thiết. Ở đây, bạn không dùng thẻ này khi trả về một thành phần đơn lẻ.

const Button = () => {
  return <button>Display</button>;
};

Trên đây là những cách dùng React tốt nhất trong năm 2023. Theo bạn nên dùng React để lập trình như thế nào, hãy chia sẻ cùng Quantrimang.com nhé!