ReactJS: Sử dụng lifecycle hooks trong React như thế nào?

ReactJS: Sử dụng lifecycle hooks trong React như thế nào?

React là một UI library cho phép chúng ta tạo nên những component và kết hợp chúng lại để tạo nên một ứng dụng tuyệt vời. Tất cả bên dưới trang web của chúng ta chỉ là những component như là các Header, Body, Footer, Navigation, Login, Modal, …

Hằng ngày, để tập trung làm việc trên component và hiểu rõ hơn về cách thức hoạt động của component, chúng ta nên tìm hiểu kỹ về lifecycle hooks. Có thể bạn nghe nói tới một số method quen thuộc như: componentDidMount, componentDidUpdate, shouldComponentUpdate,… Nhưng bạn có hiểu được trong những trường hợp nào bạn cần dùng thằng nào hay không?

Một component trong React gồm 3 giai đoạn là: khởi tạo, cập nhật, phá hủy. Vòng đời của một component gồm những thành phần như sau:

constructor

Thường được dùng để khởi tạo state, refs and binding cách phương thức.

static getDerivedStateFromProps

Phương thức này được gọi trong cả hai tiến trình là: khởi tạo cập nhật. Cho nên lưu ý rằng nó sẽ được gọi cho mỗi lần render.

Nếu bạn muốn cập nhật state dựa vào props thay đổi, bạn có thể return về một state object mới tại đây. Do đây là phương phức static nên sẽ ko truy cập được this.setState.

Một lần nữa, việc cập nhật state dựa trên props thay đổi là không khuyến khích. Nó chỉ được sử dụng trong một số trường hợp đặc biệt. Bạn phải tự hỏi, có thực sự cần lưu state này không? Và bạn có đang làm mất đi tính chất của props hay không?

Nhất thiết phải wrap một sự thay đổi state tại đây trong một điều kiện cụ thể. Vì để đảm bảo component của bạn bị lặp vô hạn.

render

Hàm render được khởi chạy khi state thay đôi qua setState hay props của nó thay đổi.

componentDidMount

Lý do mà React cho phép setState bên trong phương thức này là một số trường hợp đặc biệt tooltips, modals hay những component tương tự khi mà bạn cần khai thác DOM để tính toán lại vị trí của chúng.

Đây cũng là nơi lý tưởng để gọi API

shouldComponentUpdate

Quyết định có hay không component được update dựa vào props thay đổi hay không? Nếu return là true thì thay đổi, ngược lại false thì không.

componentDidUpdate

Một trong những trường hợp hay dùng nhất của componentDidUpdate là chúng ta muốn update lại DOM khi mà props có thay đổi gì đó.

Lấy lại data từ API khi props thay đổi.

componentWillUnmount

Đây là nơi dùng để hủy đăng ký event cho component như socket, event listener của DOM, …

Leave a Comment