Componentdidmount la gi

Xin chào mọi người, hôm nay tôi trở lại sau một thời gian dài vắng bóng. Hôm nay chúng ta hãy xem xét vòng đời của các thành phần trong reactjs.

Các phần lồi sau đây mô tả vòng đời của một thành phần:

Bạn đang xem: Componentdidmount là gì

1) Khởi tạo

• Phương thức khởi tạo tương tự được gọi khi thể hiện thành phần được tạo.

2) Cài đặt

là một hàm ràng buộc kết nối các thành phần với nhau.

componentwillmount ()

• Được gọi trước khi thành phần được hiển thị bên ngoài trình duyệt. Quá trình diễn ra nhanh chóng, vì vậy đừng làm quá nhiều ở đây, chức năng này chỉ được thực thi một lần (kể từ phiên bản 16.3, chức năng này đã không được chấp nhận và sẽ bị loại bỏ trong phiên bản 16.3.17).

kết xuất ()

• Được gọi khi thành phần được hiển thị ra khỏi trình duyệt.
• sẽ trả về những gì bạn đã viết, có thể là giá trị rỗng hoặc sai nếu bạn không muốn. Không).

componentdidmount ()

• Được gọi sau khi thành phần được hiển thị cho trình duyệt, chức năng này chỉ được thực thi một lần.
• Gọi hàm này để thông báo cho thành phần biết rằng thành phần đã tồn tại trong dom. , từ đó thành phần có thể được sử dụng để thực hiện các hoạt động dom một cách bình thường.

Để hiểu rõ hơn, hãy xem một số ví dụ.

Tham khảo: Agency là gì? Vai trò, công việc Agency trong ngành Marketing

Ví dụ:

Khi chạy, chúng tôi nhận được kết quả sau:

Constructor () được gọi khi thành phần được gọi đầu tiên, sau đó componentwillmount () được gọi, sau đó reder () được gọi, và cuối cùng hàm componentdidmount được gọi khi kết xuất () hoàn tất.

3) Cập nhật

• Sự cố xảy ra khi tôi cập nhật thành phần về đạo cụ, về trạng thái.

componentwillreceiveprops (công cụ tiếp theo)

• Chức năng này chạy khi đạo cụ của thành phần được tạo thay đổi.
• Để kết xuất lại, phải gọi setstate ().

shouldcomponentupdate (nextprops, nextstate)

• Thực thi ngay sau khi thay đổi trạng thái và đạo cụ.
• sẽ trả về true hoặc false. Phương pháp này sẽ xác định xem thành phần đã được cập nhật hay chưa. Theo mặc định, giá trị này là true. Trả lại giá trị này thành false nếu bạn không muốn thành phần hiển thị lại sau khi cập nhật trạng thái hoặc đạo cụ.

componentwillupdate (nextprops, nextstate)

• Được gọi khi trạng thái thành phần được cập nhật trước khi thành phần hiển thị lại.
• This.setstate không thể được gọi trong componentwillupdate
• Hàm kết xuất sẽ được gọi ngay sau hàm này.
• (Kể từ phiên bản 16.3, chức năng này không được dùng nữa và sẽ bị xóa trong phiên bản 17)

componentdidupdate (phần trước, phần mới nhất)

• Được gọi khi phiên bản thành phần được cập nhật và componentdidupdate được gọi sau khi html kết xuất được tải.

Sau đây, chúng tôi sẽ đưa ra một số ví dụ để bạn hiểu rõ hơn.

Ví dụ về cập nhật trạng thái

Xem thêm: Kèo lựa là gì? Kèo lựa ăn bao nhiêu?

Kết quả khi nhấp vào nút “Nhấp vào tôi”:

Ví dụ về cập nhật mặt hàng

Tạo một tệp content.js trong thư mục src với nội dung sau:

Kết quả khi nhấp vào nút “nhấp vào tôi”

4) Gỡ cài đặt

componentwillunmount ()

• Được gọi trước khi thành phần bị xóa khỏi dom.

Kết luận

Trên đây là hiểu biết nhỏ của tôi về vòng đời thành phần trong reactjs. Cảm ơn tất cả các bạn đã xem bài viết của tôi.

Tham khảo:

Xem thêm: Fan Speed là gì, sử dụng như thế nào cho phù hợp?

• https://viblo.asia/p/vong-doi-cua-component-in-react-ggj59xajlx2
• https://viblo.asia/p/vong-doi- cua-mot-react-component-rqqklmrzz7z

Trong bài này chúng ta sẽ tìm hiểu về vòng đời của một component và các methods để quản lý vòng đời này.

Lifecycle Methods

componentWillMount đây là method sẽ được thực thi trước khi 1 component được render trên cả server side và client side.

componentDidMount method này được thực thi khi 1 component được render trên client side. Đây là nơi các hàm AJAX requests, DOM or update state được thực thi. Method này cũng đucợ sử dụng để kết nối với các JS Framework khác và các function với delayed execution như setTimeout or setInterval.

componentWillReceiveProps sẽ được thực thi ngay khi thuộc tính props (tìm hiểu props là gì?) được update và trước khi component được render lại. Trong ví dụ dưới, ta sẽ sử dung method này vùng với setNewNumber để update state.

shouldComponentUpdate sẽ trả về kết quả true or false. Phương thức này sẽ xác định 1 component có được update hay không. Mặc định giá trị này là true. Nếu bạn không muốn component render lại sau khi update state hay props thì return giá trị thành false. Các bạn xem ví dụ dưới để hiểu rõ.

componentWillUpdate được gọi khi chúng ta update state của component trước khi nó render lại.

componentDidUpdate sau khi componentWillUpdate ở trên được gọi xong thì đến lượt thằng này được goi.

componentWillUnmount được gọi khi chúng ta unmout 1 component kiểu như xóa nó khỏi react.

Chúng ta xem ví dụ dưới đây để hiểu rõ hơn về các methods ở trên. Chúng ta sẽ khởi tạo state trong App.js, hàm setNewnumber sẽ được dùng để update state và các life cycle methods nằm trong content component

App.js

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         

            INCREMENT
            
         
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         

            
{this.props.myNumber}
         
      );
   }
}
export default App;

Trong index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Kết quả render ta được:

Lúc này chỉ có 2 methods được thực thi, đó là componentWillMount và componentDidMount

Khi chúng ta click vào button INCREMENT quá trình update state xảy ra và các life cycle methods khác sẽ được thực hiện

Nhớ hàm settimeout chúng ta đã tạo chứ? Bây giờ sau 10s App component sẽ bị unmount và method cuối cùng được thực hiện: