Thử thách 5 phút với React Hooks – Dành cho người mới bắt đầu

Tram Ho

Xin chào mọi người, bài viết này sẽ là một thử thách của chính mình trong việc tìm hiểu React Hooks. Hãy thử xem với 5 phút mình sẽ tìm hiểu được gì về React Hooks nhé.

Trước tiên sẽ là useState, một trong số các hooks phổ biến trong React Hooks.

1. useState

Hãy bắt đầu bằng 1 functional component nhé

Như các bạn thấy, chưa có gì mới ở đây. Mình chỉ mới hiển thị 1 đoạn text và 1 button.

Bây giờ hãy import useState, để tìm hiểu làm thế nào để quản lý state trong functional component.

Vì hooks này là một function, hãy thử console.log nó xem như thế nào nhé.

Vâng, đây là kết quả mình nhận được, một array

Thử truyền một đối số vào useState xem nhé

Kết quả nhận được là một array với phần tử đầu tiên là đối số mình truyền ở trên

Bây giờ, trong component, mình có thể truy cập state ở giá trị [0] và hiển thị nó trong <h1> thay vì hardcoded.

Thử viết ngắn gọn bằng cách sử dụng array destructuring ( nó cũng tương tự như object destructuring, hãy xem ví dụ dưới đây của mình nhé)

Kết quả sau khi sử dụng array destructuring trong useState() hooks.

Vậy là mình đã khởi tạo giá trị đầu tiên state. Câu hỏi tiếp theo là làm cách nào để thay đổi giá trị state bằng hooks?

Hãy nhớ rằng useState() hook trả về một array có 2 đầu vào. Đầu vào thứ 2 là một function nó dùng để cập nhật giá trị state.

Tất nhiên, bạn có thể đặt tên tuỳ theo ý muốn của mình, nhưng theo quy ước, nó thường được gọi với tiền tố “set-“, và sau đó bất kỳ tên biến nào mà bạn muốn cập nhật.

Thật đơn giản để sử dụng function này. Chỉ cần gọi nó và truyền qua giá trị mới mà bạn muốn trạng thái đó có! Hoặc, giống như this.setState trong một class component, bạn có thể truyền một function nhận trạng thái cũ và trả về trạng thái mới. Nguyên tắc nhỏ: làm điều này bất cứ lúc nào bạn cần dựa vào state trong quá khứ để xác định state mới.

Thử truyền nó thông qua sự kiên onClick bằng function setCount xem nhé.

Viết gọn lại chút nhé:

Thử chạy lên xem thành quả nhé mọi người.
Okay, vậy là xong hooks đầu tiên, tiếp theo mình sẽ tìm hiểu useEffect nhé.

2. useEffect

Nếu như trước đây mình cần phải biết về tất cả các lifecycle methods, với useEffect hooks đã đơn giản hóa tình huống này.

Cách import cũng tương tự với useState

Để useEffect làm một cái gì đó, hãy truyền cho nó một anonymous function. Bất cứ khi nào React re-render component, nó sẽ chạy function mà chúng ta truyền vào useEffect.

Đây là tất cả code cho đến hiện tại.