Bài 8: ReactJS - Vòng đời của Component - Học ReactJS Full Đầy Đủ Nhất

Đăng bởi: Admin | Lượt xem: 5070 | Chuyên mục: Javascript

Hôm nay chúng ta sẽ cùng tìm hiểu về vòng đời của 1 component nhé .

Phương thức sử dụng trong vòng đời của component:

componentWillMount sẽ được thực thi trước trước khi khởi chạy,ở cả 2 phía server(máy chủ) và client(phía người dùng)
componentDidMount được thực thi sau lần hiển thị đầu tiên ở phía client. Đây là nơi các yêu cầu AJAX và DOM hoặc cập nhật trạng thái. 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 bị trì hoãn như setTimeout hoặc setInterval. mình sử dụng nó để cập nhật trạng thái và 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 props được cập nhật và trước khi một quá trình khác được gọi. Mình sẽ làm thay đổi giá trị của nó khi cập nhật trạng thái(state).
shouldComponentUpdate trả về giá trị true hoặc false. Điều này sẽ xác định xem các thành phần có được cập nhật hay không.Và giá trị mặc định là true. Nếu bạn chắc chắn rằng thành phần không cần hiển thị sau khi component và props không cập nhật thì bạn hoàn toàn có thể giá trị mặc định là false.
componentWillUpdate được gọi trước khi render.
componentDidUpdate được gọi sau khi render
componentWillUnmount được gọi sau khi thành phần được ngắt kết nối khỏi dom

Trong ví dụ dưới đây, mình sẽ đặt hàm khởi tạo state trong constructor. setNewnumber được sử dụng để cập nhật trạng thái cho state. Tất cả phương thức vòng đời nằm trong component content

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);

Vào terminal và nhập dòng dưới để khởi chạy

npm start

Sau khi khởi chạy ta sẽ được kết quả như sau :

Bài tập ví dụ :

Trong ứng dụng có khá nhiều component, do đó điều này rất quan trọng trong việc giải phóng các component khi người dùng hủy(destroyed) nó

Bây giờ ở ví dụ này, mình muốn xóa bộ nhớ đệm thời gian(clear that timer) bất cứ khi nào đồng hồ (clock) được hiển thị về DOM ở lần đầu. Điều này được gọi là "ngắt kết nối" trong React

Ta cần phải khai báo một vài phương thức đặc biệt trong lớp component để chạy một vài đoạn code khi component kết nối và ngắt kết nối

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Phương thức trên được gọi là lifecycle methods (vòng đời)

Phương thức componentDidMount() sẽ chạy sau khi đầu ra đã được hiển thị ở DOM. Ta sẽ set up a timer ở đây :

componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

Lưu ý cách mình đặt timerID ở đoạn code trên

this (this.timerID)

có ý nghĩa đặc biệt, bạn có thể tự do thêm các trường bổ sung vào lớp theo cách thủ công nếu bạn cần lưu trữ thứ gì đó không tham gia vào luồng dữ liệu (như timerID).

Bây giờ mình sẽ loại bỏ bộ đếm thời gian trong phương thức vòng đời componentWillUnmount ():

componentWillUnmount() {
    clearInterval(this.timerID);
  }

Cuối cùng, chúng ta sẽ thực hiện một phương thức được gọi là tick () mà Clock component sẽ chạy mỗi giây.

Nó sẽ sử dụng this.setState() để lên lịch và cập nhật trạng thái cho component

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Và sau khi bạn run code thì kết quả là đồng hồ tích tắc từng giây.

Mình sẽ tóm tắt nhanh toàn bộ quá trình của project này như sau :

Khi thẻ <Clock /> đến hàm ReactDOM.render(), React sẽ gọi hàm khởi tạo của component clock. Vì Clock cần hiển thị thời gian hiện tại, nó sẽ khởi tạo this.state với một đối tượng bao gồm thời gian hiện tại. Do đó ta sẽ cập nhật trạng thái này sau đó
Sau đó, React gọi phương thức render () của component clock. Đây là cách React tìm hiểu những gì sẽ được hiển thị trên màn hình. Sau đó, React cập nhật DOM để khớp với kết quả hiển thị của clock.
Khi đầu ra Clock được chèn vào DOM, React sẽ gọi phương thức vòng đời componentDidMount (). Bên trong nó, component clock yêu cầu trình duyệt thiết lập bộ đếm thời gian để gọi phương thức tick () của component mỗi giây một lần.
Mỗi giây trình duyệt gọi phương thức tick (). Bên trong nó, component clock lên lịch cập nhật giao diện người dùng bằng cách gọi setState () với một đối tượng chứa thời gian hiện tại. Nhờ lời gọi setState (), React biết trạng thái đã thay đổi và gọi lại phương thức render () để tìm hiểu những gì nên hiển thị trên màn hình. Lần này, this.state.date trong phương thức render () sẽ khác và do đó kết quả hiển thị sẽ bao gồm thời gian được cập nhật. React cập nhật DOM một cách phù hợp.
Nếu component clock đã từng bị xóa khỏi DOM, React sẽ gọi phương thức componentWillUnmount () để bộ đếm thời gian dừng lại

Bài tiếp theo: ReactJS - Forms >>

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!