- vừa được xem lúc

React Lifecycle Methods

0 0 96

Người đăng: Mạnh Nguyễn Thiết

Theo Viblo Asia

Ở bài viết này chúng ta sẽ cùng nhau tìm hiểu về lifecycle hay vòng đời sống của một component trong React v16.3+. Tại sao lại là v16.3+? Vì ở phiên bản này React đã thay đổi Lifecycle, và một số methods không còn được dùng nữa.

Các bạn có thể tham khảo thêm ở Component LifeCycle Changes.

Ngoài ra, nếu các bạn muốn tìm hiểu thêm về Lifecycle cũ có thể tham khảo bài viết ReactJs component lifecycle methods — A deep dive

1. Lifecyle methods là gì? Tại sao nó lại quan trọng?

Mọi vật tồn tại trong vũ trụ này đều có một vòng đời riêng. Giống như quy luật đời người đều phải trải qua "Sinh lão bệnh tử" không ai có thể tránh khỏi. Hoặc đơn giản như vòng đời của một chiếc lá.

Tương tự vậy các component trong React được sinh ra, thay đổi khi có input vào và tại một thời điểm nào đó nó sẽ chết. Nếu chúng ta nắm rõ được vòng đời này thì chúng ta có thể kiểm soát component này và chắc chắn sẽ giúp chúng ta tạo ra kết quả tốt hơn, hiệu suất của component cao hơn.

Giả sử, bạn có một ứng dụng phát video tương tự như Youtube. Để đảm bảo ứng dụng của bạn trở nên tuyệt vời thì bạn nên xem xét việc sử dụng phần cứng như network, pin trong ứng dụng của bạn một cách hiệu quả nhất. Nếu user play video sau đó chuyển sang một ứng dụng khác thì ứng dụng của bạn cần stop video tại đúng thời điểm user chuyển ứng dụng sau đó cần play lại video khi user quay trở lại ứng dụng của bạn.

Như vậy Lifecycle methods có thể hiểu là các phương thức ảnh hưởng đến vòng đời của component.

2. Các giai đoạn trong Lifecycle

Lifecycle của một componet được chia làm 3 giai đoạn chính:

  • Mounting
  • Updating
  • Unmounting

2.1. Mounting

Trong React, mounting liên quan đến tải các components lên trên DOM. Giai đoạn này chứa các phương thức xử lý khi component được khởi tạo và khi load lên trên DOM.

constructor

Đây là phương thức gọi trước tiên mỗi khi component được khởi tạo. Phương thức này chỉ gọi một lần duy nhất. Và được để set up giá trị initial của các biến và state. Thông thường, ta sẽ khởi tạo state và bind các function ở đây.

getDerivedStateFromProps

Mục đích của phương thức này là để đồng bộ state vs props mà nó phụ thuộc. Phương thức này sẽ được gọi sau constructor và sẽ trả về một object để update state của component. Nếu nó trả về null thì sẽ không có state nào thay đổi. Đây là phương thức thay thế cho componentWillReceiveProps.

Note: Vì phương thức getDerivedStateFromProps là static method nên nó sẽ không dùng được this . Tham số đầu vào của phương thức này là props và state hiện tại của component.

render

Đây là phương thức bắt buộc phải có của React Component, vì phương thức này dùng để chuẩn bị element và để mount lên trên DOM của trình duyệt.

Note: Phương thức là pure function nên không gây ra bất kỳ side effect nào như thay đổi state.

componentDidMount

Phương thức này sẽ được gọi ngay lập tức sau khi component đã được mount vào DOM của trình duyệt. Các tương tác trực tiếp với DOM của trình duyệt hoặc việc gọi API nên được thực hiện ở đây.

2.2. Updating

Giai đoạn này bắt đầu từ khi component bắt đầu "xuất hiện" trong trình duyệt và phát triển bằng cách nhận các cập nhật mới. Có hai cách để cập nhật một component. Đó là cập nhật props từ component chaupdate state hiện tại.

Trong giai đoạn này, các phương thức dưới đây sẽ thực hiện một cách tuần tự.

getDerivedStateFromProps

Tương tự như trong giai đoạn Mounting.

shouldComponentUpdate

Phương thức này cho biết component có nên update hay không? Nếu giá trị trả về là true thì component sẽ được re-render và ngược lại. Mặc định phương thức này trả về giá trị là true.

Note: Đây là một trong những đặc điểm nhận dạng giữa Component thông thường và Pure Component.

render

Tương tự như trong giai đoạn Mounting.

getSnapshotBeforeUpdate

Phương thức này được gọi sau khi Component được tạo và trước khi nó được cập nhật từ DOM ảo vào DOM thật. Phương thức này có thể sử dụng được cả props và state hiện tại và trước đó. Giá trị của phương thức này trả về là tham số thứ 3 của phương thức componentDidUpdate.

Thường thì ta sử dụng phương thức này để đồng bộ giữa DOM hiện tại và DOM được update. Ví dụ, vị trí scroll, audio/video, text-selection,...

Tham khảo thêm anh Dan: New commit phase lifecycles.

componentDidUpdate

Phương thức được thực thi khi component mới được cập nhật đã được cập nhật trong DOM. Các trigger gọi đến thư viện thứ ba được gọi ở componentDidUpdate sẽ được re-trigger tại đây.

Các trường hợp hầu hết tương tự như sử dụng componentDidUpdate để giữ cho thư việc hoặc giao diện đồng bộ mỗi khi cập nhật.

2.3. Unmounting

Trong giai đoạn này, component sẽ được unmount khỏi DOM.

componentWillUnmount

Đây là phương thức cuối cùng trong lifecycle. Nó được thực thi ngay trước khi component bị xóa khỏi DOM. Chúng ta cần clean up tất cả những gì liên quan đến component.

3. Tổng kết

Hiểu được lifecycle trong React giúp chúng ta đảm bảo sẽ tạo được những "best" component. Bên cạnh đó, giúp ta hiểu được cách một component và biết cách để nâng cao hiệu suất.

Hy vọng ở bài viết này mọi người có thể tìm được những thứ hay ho.

Cảm ơn các bạn. Hẹn gặp lại các bạn ở những bài viết tiếp theo.

Tài liệu tham khảo

  1. ReactJs component lifecycle methods — A deep dive
  2. Understanding React v16.4+ New Component Lifecycle Methods
  3. Dan Abramov: Beyond React 16 | JSConf Iceland
  4. Component LifeCycle Changes
  5. New commit phase lifecycles.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Cùng tìm hiểu về các hook trong React hooks

Đối với ai đã từng làm việc với React thì chắc hẳn đã có những lúc cảm thấy bối rối không biết nên dùng stateless (functional) component hay là stateful component. Nếu có dùng stateful component thì cũng sẽ phải loay hoay với đống LifeCycle 1 cách khổ sở Rất may là những nhà phát triển React đã kịp

0 0 81

- vừa được xem lúc

Khi nào nên (và không nên) sử dụng Redux

. Công việc quản lý state với những hệ thống lớn và phức tạp là một điều khá khó khăn cho đến khi Redux xuất hiện. Lấy cảm hứng từ design pattern Flux, Redux được thiết kế để quản lý state trong các project JavaScript.

0 0 106

- vừa được xem lúc

ReactJS: Props và State

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì? Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây.

0 0 41

- vừa được xem lúc

State và Props trong Reactjs

Hello các bạn, tiếp tục seri tìm hiểu về ReactJs hôm nay mình xin giới thiệu đến các bạn hai thứ mình cho là thú vị nhất của ReactJs là State và Props. State bạn có thể hiểu đơn giản là một nơi mà bạn lưu trữ dữ liệu của Component, từ đó bạn có thể luân chuyển dữ liệu đến các thành phần trong Compon

0 0 36

- vừa được xem lúc

Memoization trong React

. 1.Introduction. Memoization có liên quan mật thiết đến bộ nhớ đệm, và dưới đây là một ví dụ đơn giản:. const cache = {}.

0 0 38

- vừa được xem lúc

Nâng cao hiệu suất React Hooks với React.memo, Memoization và Callback Functions

1.Ngăn Re-render và React.memo. React.

0 0 67