React Lifecycle Methods

Mở đầu

Chào các bạn đọc giả thân mến. Trong phạm vi bài viết này mình sẽ chia sẻ về vòng đời của một React Component các bạn nhé.

Lifecycle Methods

Nhìn chung, quá trình mounting hay render của một React Component có 4 vòng đời (Lifecycle). Chúng được gọi theo thứ tự như sau:

• constructor()

• componentWillMount()

• render()

• componentDidMount()

Nhưng, vòng đời cặp nhật (update) của một React Component diễn ra như thể nào? Chúng có 5 phương thức:

• componentWillRecieveProps()

• shouldComponentUpdate()

• componentWillUpdate()

• render()

• componentDidUpdate()

Last but not least đó chính là phương thức vòng đời unmount. Nó chỉ có một phương thức duy nhất đó là: componentWillUnmount()

Nếu là beginner bạn không nhất thiết phải biết hết tất cả các phương thức vòng đời này. Vì ngay cả trong những ứng dụng React lớn và phức tạp, đôi khi chúng ta chỉ sử dụng một số ít phương thức trong số chúng mà thôi. Phổ biến sẽ là hai phương thức constructor() và render(). Tuy nhiên, mỗi phương thức sẽ được sử dụng trong các trường hợp cụ thể khác nhau, nên việc nắm được khái niệm và hiểu đúng cách thức hoạt động của mỗi phương thức sẽ là rất hữu ích cho các bạn trong quá trình làm việc.

• constructor(props): Được gọi khi component được khởi tạo. Bạn có thể thiết lập các trạng thái ban đầu bên trong component (initial component state) và ràng buộc các class methods (bind class methods).

• componentWillMount(): Được gọi trước phương thức render(). Đó là lý do tại sao nó được sử dụng để thiết lập các trạng thái ban đầu bên trong component (internal component state), bởi vì nó sẽ không được kích hoạt trong lần hiển thị (render) thứ hai. Nói chung, bạn nên sử dụng phương thức constructor() để thiết lập init state cho component

• render(): Phương thức này là bắt buộc và trả về các thành phần như một outputs của component. Nó nên là pure method (Có nghĩa bạn không nên thực hiện việc sửa đổi state component trong này). Nó nên nhận vào (get) một inputs và trả lại (return) một outputs, inputs ở đây có thể là props hoặc state, outputs là các element.

• componentDidMount(): Chỉ được gọi một lần khi component được gắn kết vào DOM (hiển thị). Vì vậy, đây là thời điểm thích hợp nhất để bạn thực hiện việc giao tiếp với server để lấy dữ liệu từ API. Dữ liệu được tìm và lưu trữ vào state của component để hiển thị trong phương thức render().

• componentWillReceiveProps(nextProps): Phương thức này được gọi trong suốt quá trình component update. Bạn sẽ nhận vào next props, do vậy có thể nhìn thấy được sự khác nhau, thay đổi giữa next props và previous props. Bằng cách sử dụng this.props chúng ta có thể set những behavior khác nhau dựa trên props cũ và props mới. Ngoài ra, bạn có thể thiết lập state dựa trên nextProps.

• shouldComponentUpdate(nextProps, nextState): Phương thức luôn luôn được gọi mỗi khi component được update (do thay đổi state or props). Bạn sẽ sử dụng phương thức này trong việc tối ưu hóa hiệu suất ứng dụng. Tùy thuộc vào giá trị boolean mà bạn trả về từ phương thức này mà component và children của component sẽ hiển thị hoặc không. Bạn có thể ngăn không cho phương thức render() thực thi.

• componentWillUpdate(nextProps, nextState): Phương thức được gọi ngay lập tức trước phương thức render(). Lúc này, chúng ta đã có được next props và next state như mong muốn. Bạn có thể sử dụng phương thức này như là cơ hộ cuối cùng để thực hiện các thiết lập trước khi phương thức render() thực thi.

• componentDidUpdate(): Phương thức được gọi lập tức ngay sau phương thức render(). Bạn có thể sử dụng nó để thực hiện các biện pháp nâng cao performance trên DOM hoặc thực hiện các yêu cầu bất đồng bộ (asynchronous requests).

• componentWillUnmount(): Được gọi trước khi bạn destroy component (component bị remove khỏi DOM). Bạn có thể sử dụng phương thức này để thực hiện công việc dọn dẹp.

constructor() và render() là hai phương thức thường được sử dụng cho các ES6 class. Trên thực tế, render() là phương thức được required. Nếu không, bạn không thể trả lại (return) bất cứ thành phần nào.

Ngoài ra, còn một phương thức vòng đời khác đó là: componentDidCatch(error, info). Phương thức này đã được giới thiệu trong React phiên bản 16 và được sử dụng để bắt lỗi trong component.

Bài viết là kiến thức mình lượm nhặt được trong quá trình tìm hiểu và làm demo. Các bạn tham khảo thêm tại: https://reactjs.org/docs/state-and-lifecycle.html

Cảm ơn các bạn đã đọc bài viết. Chúc các bạn học tốt!