Component Life Cycle

Trong chương này, chúng ta sẽ thảo luận về component lifecycle methods.

Phương pháp vòng đời

  • componentWillMount được thực thi trước khi hiển thị, trên cả máy chủ và phía máy khách.
  • componentDidMount được thực thi sau lần hiển thị đầu tiên chỉ ở phía máy khách. Đây là nơi các yêu cầu AJAX và DOM hoặc cập nhật trạng thái sẽ xảy ra. Phương pháp này cũng được sử dụng để tích hợp với các khung JavaScript khác và bất kỳ hàm nào có quá trình thực thi chậm trễ như setTimeout hoặc setInterval . Chúng tôi đang sử dụng nó để cập nhật trạng thái để chúng tôi có thể kích hoạt các phương thức vòng đời khác.
  • componentWillReceiveProps được gọi ngay sau khi các đạo cụ được cập nhật trước khi một kết xuất khác được gọi. Chúng tôi đã kích hoạt nó từ setNewNumber khi chúng tôi cập nhật trạng thái.
  • shouldComponentUpdate phải trả về giá trị true hoặc false . Điều này sẽ xác định xem thành phần sẽ được cập nhật hay không. Điều này được đặt thành true theo mặc định. Nếu bạn chắc chắn rằng thành phần không cần hiển thị sau khi trạng thái hoặc đạo cụ được cập nhật, bạn có thể trả về giá trị sai .
  • componentWillUpdate được gọi ngay trước khi kết xuất.
  • componentDidUpdate được gọi ngay sau khi kết xuất.
  • componentWillUnmount được gọi sau khi thành phần được ngắt kết nối khỏi dom. Chúng tôi đang unmount toàn bộ thành phần của chúng tôi trong main.js .

Trong ví dụ sau, chúng ta sẽ thiết lập state ban đầu trong hàm khởi tạo. Các setNewnumber được sử dụng để cập nhật state . Tất cả các phương thức vòng đời đều nằm trong thành phần Nội dung.

App.jsx

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 (

         <div>

            <button onClick = {this.setNewNumber}>INCREMENT</button>

            <Content myNumber = {this.state.data}></Content>

         </div>

      );

   }

}

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 (

         <div>

            <h3>{this.props.myNumber}</h3>

         </div>

      );

   }

}

export default App;

main.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

 

ReactDOM.render(<App/>, document.getElementById('app'));

 

setTimeout(() => {

   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Sau khi kết xuất ban đầu, chúng ta sẽ nhận được màn hình sau.