React Class Components

Trước React 16.8, Các Class component là cách duy nhất để theo dõi trạng thái và vòng đời của một React component. Các Function component được coi là "không có trạng thái".

Với việc bổ sung thêm các Hook, thì các Function component bây giờ gần như tương đương với các Class component. Sự khác biệt là rất nhỏ nên có thể bạn sẽ không bao giờ cần phải sử dụng Class component trong React nữa.

Mặc dù các Function component được yêu thích hơn, nhưng hiện tại không có kế hoạch nào về việc loại bỏ các Class component khỏi React.

Phần này sẽ cho chúng ta một cái nhìn khái quát về cách sử dụng các Class component trong React.

Lưu ý: Chúng ta có thể thoải mái bỏ qua phần này, và sử dụng các Function Component để thay thế.

Các React Component

Các Component là các đoạn code ngắn độc lập và có thể tái sử dụng. Chúng có chức năng giống như là các function của JavaScript, nhưng hoạt động độc lập và trả về HTML thông qua hàm render().

Các Component được chia thành hai loại là Class component và Function component, trong chương này chúng ta sẽ tìm hiểu về Class component.

Tạo ra một Class Component

Khi tạo ra một React component, thì tên của component phải bắt đầu bằng một chữ viết hoa.

Class Component phải bao gồm câu lệnh extends React.Component, câu lệnh này sẽ tạo ra một sự thừa kế từ React.Component, và cho component của chúng ta quyền truy cập vào các function của React.Component.

Class component cũng đòi hỏi phải có phương thức render(), phương thức này sẽ trả về HTML.

Ví dụ sau sẽ tạo ra một Class component có tên là Car:

Bây giờ thì ứng dụng React của chúng ta đã có một component có tên là Car, nó sẽ trả về một phần tử <h2>.

Để sử dụng component này trong ứng dụng của mình, chúng ta sử dụng cú pháp tương tự như HTML thông thường: <Car />.

Ví dụ sau sẽ hiển thị component có tên là Car trong phần tử có id="root":

Component Constructor

Nếu như có một constructor() function trong component của chúng ta, thì function này sẽ được gọi khi component được khởi tạo.

constructor function là nơi mà chúng ta khởi tạo các thuộc tính của component.

Trong React, các thuộc tính của component sẽ được giữ trong một đối tượng được gọi là state.

Chúng ta sẽ tìm hiểu thêm về state sau trong tutorial này.

constructor function cũng là nơi mà chúng ta tôn vinh sự thừa kế của component cha bằng cách bao gồm phương thức super(), phương thức super() này sẽ thực thi constructor function của component cha, và component của chúng ta sẽ có quyền truy cập vào tất cả các function của component cha (React.Component).

Ví dụ sau sẽ tạo ra một constructor function trong component có tên là Car, và thêm một thuộc tính color:

Ví dụ sau sẽ sử dụng thuộc tính color trong phương thức render():

Props

Một cách khác để xử lý các thuộc tính của component là sử dụng props.

Props thì giống như các đối số của hàm, và chúng ta gửi chúng đến component như là các thuộc tính.

Chúng ta sẽ tìm hiểu thêm về props trong chương tiếp theo.

Ví dụ sau sẽ sử dụng một thuộc tính để truyền một màu sắc vào component có tên là Car, và sử dụng nó trong phương thức render():

Props trong Constructor

Nếu như component của chúng ta có một constructor function, thì props sẽ luôn luôn được truyền đến constructor và cũng đến React.Component thông qua phương thức super().

Ví dụ: 

Component trong Component

Chúng ta có thể tham chiếu đến các component bên trong các component khác:

Ví dụ sau sẽ sử dụng component có tên là Car ở bên trong component có tên là Garage:

Component trong tập tin

React chủ yếu nói về việc tái sử dụng lại code, và việc đưa một số component vào các tập tin riêng biệt có thể là một hành động thông minh.

Để làm điều đó, chúng ta hãy tạo ra một tập tin mới với phần mở rộng là *.js và đặt code vào bên trong nó:

Lưu ý rằng tập tin phải được bắt đầu bằng import React, và nó phải được kết thúc bằng câu lệnh export default Car;.

Sau đây là nội dung của tập tin mới, mà chúng ta đã đặt tên là Car.js:

Để có thể sử dụng component có tên là Car, chúng ta phải import tập tin tương ứng vào ứng dụng của mình.

Bây giờ chúng ta sẽ import tập tin Car.js vào ứng dụng, và chúng ta có thể sử dụng component có tên là Car như thể nó được tạo ra ở đây.

Đối tượng state của Class Component

Các Class component của React có một đối tượng dựng sẵn là state.

Chúng ta có thể nhận thấy rằng chúng ta đã sử dụng state trước đó trong phần constructor của component.

Đối tượng state là nơi mà chúng ta lưu trữ các giá trị của thuộc tính thuộc về component.

Khi đối tượng state thay đổi, thì component sẽ được render lại.

Tạo ra đối tượng state

Đối tượng state được khởi tạo trong constructor:

Ví dụ sau sẽ chỉ định đối tượng state trong phương thức constructor:

Đối tượng state có thể chứa bao nhiêu thuộc tính tùy thích:

Ví dụ sau sẽ chỉ định tất cả các thuộc tính mà component cần:

Sử dụng đối tượng state

Chúng ta có thể tham chiếu đến đối tượng state từ bất cứ nơi đâu trong component bằng cách sử dụng cú pháp this.state.propertyname:

Ví dụ sau sẽ tham chiếu đến đối tượng state trong phương thức render():

Thay đổi giá trị trong đối tượng state

Để thay đổi một giá trị trong đối tượng state, chúng ta sử dụng phương thức this.setState().

Khi một giá trị trong đối tượng state thay đổi, thì component sẽ được render lại, có nghĩa là đầu ra sẽ thay đổi theo các giá trị mới.

Ví dụ sau sẽ thêm một button với sự kiện onClick, sự kiện này sẽ thay đổi thuộc tính color:

Lưu ý: Chúng ta hãy luôn luôn sử dụng phương thức setState() để thay đổi giá trị trong đối tượng state, nó sẽ đảm bảo rằng component biết nó đã được cập nhật và gọi phương thức render() (và tất cả các phương thức vòng đời khác).

Vòng đời của các Component

Mỗi component của React đều có một vòng đời mà chúng ta có thể giám sát và điều khiển trong ba giai đoạn chính của nó.

Ba giai đoạn đó là: Thêm (Mounting), Cập nhật (Updating) và Xóa (Unmounting).

Giai đoạn thêm - Mounting

Giai đoạn thêm có nghĩa là đặt các phần tử vào trong DOM.

React có bốn phương thức dựng sẵn được gọi theo thứ tự sau, khi thêm một component vào DOM:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Phương thức render() là bắt buộc và sẽ luôn luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu như chúng ta định nghĩa chúng.

Phương thức constructor

Phương thức constructor() được gọi trước bất kỳ phương thức nào, khi component được khởi tạo, và nó là nơi tự nhiên để thiết lập state ban đầu và các giá trị ban đầu khác.

Phương thức constructor() được gọi với props, như là các đối số, và chúng ta sẽ luôn bắt đầu bằng cách gọi super(props) trước bất cứ thứ gì khác, điều này sẽ khởi tạo phương thức constructor của component cha và cho phép component của chúng ta kế thừa các phương thức từ component cha của nó(React.Component).

Trong ví dụ sau phương thức constructor được gọi, bởi React, mỗi lần chúng ta tạo ra một component:

Phương thức getDerivedStateFromProps

Phương thức getDerivedStateFromProps() được gọi ngay trước khi render các phần tử trong DOM.

Đây là nơi tự nhiên để thiết lập đối tượng state dựa vào props ban đầu.

Nó nhận state như là một đối số, và trả về một đối tượng với sự thay đổi ở đối tượng state.

Ví dụ bên dưới bắt đầu với favorite color là "red", nhưng phương thức getDerivedStateFromProps() cập nhật favorite color dựa vào thuộc tính favcol:

Trong ví dụ sau phương thức getDerivedStateFromProps được gọi ngay trước khi phương thức render được gọi:

Phương thức render

Phương thức render() là bắt buộc, và là phương thức thực sự xuất ra HTML cho DOM.

Ví dụ sau là một component đơn giản với một phương thức render():

Phương thức componentDidMount

Phương thức componentDidMount() được gọi sau khi component được render.

Đây là nơi mà chúng ta chạy các câu lệnh bắt buộc khi component đã được đặt vào DOM.

Trong ví dụ sau lúc đầu favorite color là red, nhưng chúng ta hãy đợi một giây, favorite color sẽ được chuyển thành yellow:

Giai đoạn cập nhật - Updating

Giai đoạn tiếp theo trong vòng đời là khi một component được cập nhật.

Một component được cập nhật bất cứ khi nào có một sự thay đổi trong state hoặc props của component.

React có năm phương thức dựng sẵn được gọi theo thứ tự sau, khi một component được cập nhật:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Lưu ý: Phương thức render() là bắt buộc và sẽ luôn luôn được gọi, các phương thức khác là tùy chọn và sẽ được gọi nếu như chúng ta định nghĩa chúng.

Phương thức getDerivedStateFromProps

Tại giai đoạn cập nhật phương thức getDerivedStateFromProps cũng được gọi. Đây là phương thức đầu tiên được gọi khi một component được cập nhật.

Đây vẫn là nơi tự nhiên để thiết lập đối tượng state dựa vào props ban đầu.

Ví dụ bên dưới có một button thay đổi favorite color thành blue, nhưng vì phương thức getDerivedStateFromProps() được gọi, nên nó sẽ cập nhật state với màu sắc từ thuộc tính favcol, favorite color vẫn được render là yellow:

Trong ví dụ sau nếu như component được cập nhật, thì phương thức getDerivedStateFromProps() sẽ được gọi:

Phương thức shouldComponentUpdate

Trong phương thức shouldComponentUpdate() chúng ta có thể trả về một giá trị Boolean để chỉ định xem React có nên tiếp tục được render nữa hay không.

Giá trị mặc định của nó là true.

Ví dụ bên dưới cho thấy chuyện gì sẽ xảy ra khi phương thức shouldComponentUpdate() trả về giá trị false:

Ví dụ sau sẽ ngăn cản component khỏi render tại bất kỳ giai đoạn cập nhật nào:

Ví dụ tương tự như trên, nhưng lần này phương thức shouldComponentUpdate() sẽ trả về giá trị true:

Phương thức render

Phương thức render() tất nhiên là được gọi khi một component được cập nhật, nó phải render lại HTML cho DOM, với những sự thay đổi mới.

Ví dụ bên dưới có một button thay đổi favorite color thành blue:

Hãy click vào button để tạo ra một sự thay đổi trong đối tượng state của component:

Phương thức getSnapshotBeforeUpdate

Trong phương thức getSnapshotBeforeUpdate() chúng ta có quyền truy cập vào props và state trước khi cập nhật, có nghĩa là thậm chí sau khi cập nhật, chúng ta vẫn có thể kiểm tra xem trước khi cập nhật các giá trị của chúng là gì.

Nếu như phương thức getSnapshotBeforeUpdate() có mặt, thì chúng ta cũng sẽ phải bao gồm phương thức componentDidUpdate(), nếu không thì chúng ta sẽ gặp lỗi.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là:

Khi component đang được thêm thì nó được render với favorite color là "red".

Khi component đã được thêm, thì một timer thay đổi state, và sau một giây, favorite color trở thành "yellow".

Hành động này kích hoạt giai đoạn cập nhật, và do component này có một phương thức getSnapshotBeforeUpdate(), nên phương thức này được thực thi, và ghi ra một thông báo vào phần tử trống DIV1.

Sau đó phương thức componentDidUpdate() được thực thi và ghi ra một thông báo trong phần tử trống DIV2:

Ví dụ sau sẽ sử dụng phương thức getSnapshotBeforeUpdate() để tìm hiểu xem đối tượng state trông như thế nào trước khi cập nhật:

Phương thức componentDidUpdate

Phương thức componentDidUpdate được gọi sau khi component được cập nhật trong DOM.

Ví dụ dưới đây có vẻ phức tạp, nhưng tất cả những gì nó làm là:

Khi component đang được thêm thì nó được render với favorite color là "red".

Khi component đã được thêm, thì một timer thay đổi state, và màu sắc trở thành "yellow".

Hành động này kích hoạt giai đoạn cập nhật, và do component này có một phương thức componentDidUpdate, nên phương thức này được thực thi và ghi ra một thông điệp trong phần tử DIV trống:

Trong ví dụ sau phương thức componentDidUpdate được gọi sau khi cập nhật đã được render trong DOM:

Giai đoạn xóa - Unmounting

Giai đoạn tiếp theo trong vòng đời là khi một component bị xóa khỏi DOM.

React chỉ có một phương thức dựng sẵn duy nhất được gọi khi một component bị xóa khỏi DOM:

• componentWillUnmount()

Phương thức componentWillUnmount

Phương thức componentWillUnmount được gọi khi component sắp bị xóa khỏi DOM.

Chúng ta hãy click vào button để xóa header: