Có thể nói, khái niệm component trong React là một trong những thành phần quan trọng nhất của React. Do vậy, việc hiểu rõ vòng đời của component sẽ giúp cho bạn hiểu rõ hơn về React.

Bạn có thể tham khảo tài liệu chính thức (Không ES6) tại đây:

http://facebook.github.io/react/docs/component-specs.html

Đây là một trang rất rõ ràng, chi tiết khác (Không ES6)

http://busypeoples.github.io/post/react-component-lifecycle/

Tuy nhiên, các tài liệu trên không viết cho ES6, nên bài viết này sẽ viết lại với code thuộc ES6, về cơ bản chỉ khác ở phần khởi tạo props và state

Trong bài viết sử dụng ES6/ES2015, nếu bạn chưa quen thì hạy đọc thêm bài ES6/ES2015 là gì

Danh sách các hàm/phương thức của compopent

Danh sách các method của một component, bạn vui lòng đọc kỹ trong code có những dòng chú thích giải thích rõ về chức năng của hàm. Việc nắm hết các phương thức sau là điều kiện tiên quyết để hiểu vòng đời của component hoạt động như thế nào.

Như vậy, class phía trên đã liệt kê toàn bộ phương thức của Component, tiếp theo chúng ta sẽ xem xét các sự kiện tương tác ảnh hưởng đến Component như thế nào.

Vòng đời của component

Khởi tạo Component

Lần lượt các hành động sau để khởi tạo component:

  • Khởi tạo Class (đã thừa kế từ class Component của React)
  • Khởi tạo giá trị mặc định cho Props (defaultProps)
  • Khởi tạo giá trị mặc định cho State (trong hàm constuctor)
  • Gọi hàm componentWillMount()
  • Gọi hàm render()
  • Gọi hàm componentDidMount()

Khi State thay đổi

  • Cập nhật giá trị cho state
  • Gọi hàm shouldComponentUpdate()
  • Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
  • Gọi hàm render()
  • Gọi hàm componentDidUpdate()

Khi Props thay đổi

  • Cập nhật giá trị cho props
  • Gọi hàm componentWillReceiveProps()
  • Gọi hàm shouldComponentUpdate()
  • Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
  • Gọi hàm render()
  • Gọi hàm componetDidUpdate()

Khi Unmount component

  • Gọi hàm componentWillUnmount()

Nói thêm về setState

Trong React, bạn chỉ khởi tạo giá trị this.state một lần duy nhất, sau khi khởi tạo xong, nếu bạn muốn cập nhật this.state, bạn phải dùng hàm this.setState.

Khi sử dụng this.setState, chính là kích hoạt danh sách các phương thức thuộc vòng đời của component (shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate). Và cũng luôn nhớ rằng, this.setState là hàm async, nên truy cập this.state ngay sau khi setState sẽ không nhận được giá trị mới của this.state.

Hãy thử xem đoạn code sau:

Để khắc phục khi bạn muốn thực hiện thêm 1 hành động nào đó như lưu log, tracking, thông báo… thì bạn sử dụng hàm callback như sau:

Ở đoạn code trên mình lồng trong componentWillReceiveProps chỉ là ví dụ thôi nhé, bạn có thể sử dụng cách viết callback sau khi setState ở bất cứ đâu trong component ngoại trừ hàm render()

Kết

Khi mới bước chân vào hệ sinh thái React, bạn cũng sẽ như mình lúng túng với Flux, Redux…Nó là những khái niệm rất khó nuốt, và càng khó nuốt hơn khi bạn chưa nắm rõ vòng đời của component trong React như thế nào.

Mình nhắc lại là việc hiểu rõ nó rất quan trọng, hi vọng qua bài viết này sẽ giúp bạn đạt được điều đó. Với những ứng dụng không quá phức tạp về phía người dùng, sự liên kết trao đổi dữ liệu giữa các component không cùng cha-con thì không cần phải quan tâm đến Flux/Redux.

Series Navigation<< Hướng dẫn sử dụng Redux hiệu quả trong ứng dụng React

Comments