Các phương thức vòng đời và Hooks trong React

Phiên bản React 16.8.0 bao gồm hỗ trợ chính thức cho Hooks.16.8 là một trong những bước quan trọng được thực hiện bởi hệ sinh thái React. Trước ngày 16.8, thành phần lớp là lựa chọn duy nhất để triển khai các phương thức trạng thái và vòng đời. Trước đó, trong một tình huống mà bạn cần triển khai các phương thức trạng thái hoặc vòng đời trong một thành phần chức năng hiện có, mã cấu trúc lại và thay đổi thành phần chức năng đó thành thành phần lớp là cách duy nhất. Nhưng bây giờ, các nhà phát triển có thể triển khai các thành phần chức năng của họ với sự phát triển React với sự trợ giúp của React Hooks. Phương thức State và Lifecycle là xương sống của bất kỳ ứng dụng React nào và Hooks cho phép các thành phần chức năng triển khai chúng một cách hiệu quả. Hooks cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết một lớp vì chúng không hoạt động bên trong các lớp.

Vì vậy, nếu bạn dự định sử dụng React Hooks lần đầu tiên, blog này là dành cho bạn. Nó sẽ giúp bạn hiểu về Hooks và quá trình chuyển đổi diễn ra như thế nào khi sử dụng các thành phần lớp sang các thành phần chức năng. Đây là những gì chính xác tôi sẽ nói về: 

• Quản lý trạng thái (thành phần lớp so với thành phần chức năng)
• Các phương thức vòng đời của phản ứng trong các thành phần lớp và việc triển khai tiếp theo của chúng trong React Hooks

Hãy thảo luận về chúng từng cái một.

Quản lý trạng thái (thành phần lớp so với thành phần chức năng)

State là một trong những khái niệm quan trọng nhất của hệ sinh thái React. Nó là nơi mà dữ liệu đến từ thành phần. Nó lưu trữ dữ liệu của một thành phần và xác định hành vi của nó theo cách sau:

Trong thành phần lớp:

Trong thành phần chức năng:

Các phương thức vòng đời của phản ứng trong các thành phần lớp và việc triển khai chúng trong React Hooks

Trong React, mỗi thành phần có các giai đoạn trong vòng đời của nó, thường được gọi là vòng đời của thành phần React. Có các giai đoạn khác nhau trong vòng đời, viz. Gắn kết, cập nhật và tháo gỡ. Mỗi pha có các phương thức của nó - componentDidMount, componentDidUpdate, componentWillUnmount, v.v. giúp bạn thực hiện các hoạt động vòng đời trên các thành phần.

Trong các thành phần lớp, bạn có thể mở rộng trực tiếp từ Thành phần React để truy cập các phương thức vòng đời, nhưng để sử dụng chúng trong các thành phần chức năng, bạn cần React Hooks.

Hãy xem chi tiết cách các phương thức này được thực thi:

componentDidMount

Một phương thức vòng đời chạy hoặc thực thi sau khi thành phần được gắn kết và hiển thị cho DOM. Nó chỉ được gọi một lần trong suốt vòng đời của thành phần sau khi quá trình gắn thành phần được thực hiện xong.

Trong thành phần lớp:

Trong thành phần chức năng:

componentDidUpdate

Nó là một phương thức vòng đời thực thi sau một bản cập nhật trong thành phần và kiểm tra xem một hỗ trợ hoặc trạng thái cụ thể có thay đổi hay không.

Trong thành phần lớp:

Trong thành phần chức năng:

ComponentWillUnmount

Nó là một phương thức vòng đời chạy hoặc thực thi khi thành phần sắp được gỡ bỏ hoặc ngắt kết nối khỏi DOM. Nó chỉ được gọi một lần trong vòng đời của một thành phần.

Trong thành phần lớp:

React Hooks cung cấp rất nhiều tính linh hoạt khi thực hiện các phương thức vòng đời. Chúng cho phép nhà phát triển chọn cách kết hợp chặt chẽ hoặc lỏng lẻo các phương pháp vòng đời. Tôi hy vọng blog này sẽ giúp bạn dễ dàng thông qua các phương pháp vòng đời. Bạn đang chờ đợi điều gì? Hãy tiếp tục và thử các bước này và cho tôi biết về trải nghiệm của bạn trong phần nhận xét bên dưới. Cho đến lúc đó, Happy Coding!

Nguồn: Opcito