Hiểu về Component Lifecycle

1) Tìm hiểu về Component Lifecyle Method

-Component Lifecycle Method là các function có sẵn trong React khi chúng ta định nghĩa hàm này trong class thì nó sẽ được tự động gọi tại một thời điểm nhất định nào đó trong vòng đời (Life cycle ) của một component.

- Chúng ta đã thấy hàm contructor là một function có thể tùy ý định nghĩa hoặc không và nó sẽ được tự động invoked khi chúng ta tạo một instance của class , contructor khác với render method bắt buộc phải định nghĩa , khi state thay đổi thì React sẽ invoked hàm render để hiển thị lại component => Về mặt kĩ thuật render method là một LifeCyle Method  

- Ảnh trên mô tả toàn bộ những hành động xảy ra trong vòng đời của một component

- B1 : contructor sẽ được gọi ngay khi có bất cứ thể hiện nào của component được khởi tạo.

- B2 : Render method sẽ trả về các code GSX và các code này sẽ hiển thị nội dung ra màn hình.

- B3 : Một loạt các LifecycleComponentMethod sẽ được gọi vào các thời điểm khác nhau trong LifeCycle.

Một vài LifeCycle Method

componentDidMount(){}

Khi chúng ta định nghĩa hàm componentDidMount trong class thì hàm này sẽ được invoked một lần khi component được hiển thị trên màn hình. => Ngay khi code GSX được render ra và hiển thị lên màn hình componentDidMountMethod sẽ được gọi

componentDidUpdate(){}

Phương thức này về cơ bản sẽ chờ các React cập nhật lại các component bằng cách invoked method render hành động này lại  khởi nguồn từ hành động this.setState.(thay đổi thuộc tính của state)

=> Mỗi khi cập nhật property trên state thì hàm componentDidMount(){} tự động được invoked.

Tiếp tục khi chúng ta không muốn component này hiển thị nữa thì componentWillUnmountMethod sẽ được gọi tự động.

* Chú thích.

- Nói thêm về LifeCycle của một component là đề cập đến toàn bộ thời gian từ khi Component đó được render ra để hiển thị trong DOM quá trình update các property trên state của nó tại những thời điểm bất kì rồi thành phần có thể bị xóa khỏi DOM , đây chính là LifeCycle (Vòng đời) của Component.


2) Tại sao chúng ta phải sử dụng các LifeCycleMethod

- Có thể thấy rằng contructor là một nơi hoàn hảo để định nghĩa state , contructor được invoked ngay khi tạo component mà state thì bắt buộc phải được define trước khi tạo component.
- Đối với Contructor : Đây là một hàm đặc biệt nó giúp chúng ta thiết lập những hành động chỉ cần được gọi 1 lần. VD : gọi giao thức mạng hay call 1 API nào đó , sau khi API trả về data chúng ta có thể setState bla bla

- RenderMethod : Nó tránh trả về bất cứ thứ gì ngoại từ JSX.

-componentDidMount : Hàm này giúp load dữ liệu ngay khi renderMethod được chạy , nó cũng có thể gọi giao thức mạng hay call 1 API nào đó , nhìn chung thì có thể call API hoặc ở trong contructor hoặc ở trong componentDidMount không có sự khác biệt lớn nào nhưng trong doc của React thì nên Call API trong hàm ComponentDidMount vì nó sẽ làm code bạn rõ ràng hơn.

-componentDidUpdate :Hàm được gọi bất cứ khi nào props hoặc state của nó thay đổi.

-componentWillUnmount : Hàm chạy ngay trước khi component bị loại bỏ khỏi DOM thường dùng để clean dữ liệu.