Tại sao chúng ta nên sử dụng React Hook (P1)

  1. React Hook là gì?
    Hook là một khái niệm được Facebook công bố vào năm 2018 trong phiên bản React 16.8. Tuy nó không cũ nhưng hiện tại nhiều project sử dụng bằng class component đã được chuyển dần sang function component kết hợp với Hook.
  2. React Hook có lợi gì hơn không?
    Như mọi người đã biết thì React Hook cho phép chúng ta quản lý state trong stateless(functional) component mà điều trước đây chúng ta phải thực hiện thông qua Class.
    Vậy tại sao có Class để quản lý state rồi mà nó vấn dùng function để quản lý là gì :wink: ! Chúng ta cùng liệt kê một số nguyên nhân ở đây nhé:
  • Lập trình viên JS thường quen với function rồi :grin:

  • Đọc code với function dễ dàng hơn vì nó không có những thứ lằng nhằng như quản lý state hay những thứ hầm bà nhằng lifecycle :wink:

  • Tốc độ thực thi của function nhanh hơn class component
    image

  1. React Hook so với Redux thì như thế nào?
    Ngoài việc sử dụng useState và useEffect thì Hook cung cấp một số để chúng ta có thể làm việc giống như Redux
  • useContext thay thế cho Store. Tuy nhiên có điểm useContext cần phải tối ưu là nó chỉ chia sẻ state đến các component mức dưới không tập trung như Redux nên khó mở rộng.

  • useReducer và useEffect chỉ tạo được action đơn giản. Khi action nâng cao thì chúng ta phải sử dụng Redux kết hợp với các middeware như Saga.

  • Tất nhiên chứ có extenstion nào để có thể debug Hook như Redux Dev Tool.
    Tóm đi tóm lại thì khi chúng ta chỉ sử dụng Hook khi dự án nhỏ có thể tưởng tượng dễ dàng state còn khi lớn thì nên ưu tiên Redux.

  1. useState() và tổng kết bài viết
    Trong bài viết này chúng ta cùng nhau tìm hiểu React Hook đầu tiên là useState(). Các hook khác chúng ta sẽ tìm hiểu trong bài viết tiếp theo:
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Và kết quả:


Nghịch thêm tại đây: https://stackblitz.com/edit/react-bccerv?file=index.js
5.Tài liệu tham khảo

Nếu có gì thắc mắc anh chỉ và các bạn để lại câu hỏi để chúng ta cùng trao đổi. Cảm ơn mọi người

3 Likes

Hi em,

Good reflection article! You can learn more about Markdown via this guide to have better format for your article!

1 Like