Vòng đời của component trong React

React đang phát triển rất mạnh mẽ và thu hút sự quan tâm của nhiều người. Trong React, thành phần có thể được coi là thành phần quan trọng nhất, vì mọi thứ trong React đều xoay quanh thành phần. Do đó, việc hiểu rõ về thành phần sẽ giúp chúng ta có cái nhìn tổng quan nhất về React. Lifecycle methods là các phương thức được gọi tại một thời điểm nhất định trong vòng đời của một thành phần. Chúng ta có thể viết các lifecycle methods được gọi trước khi thành phần được hiển thị lần đầu tiên, hoặc được gọi sau khi thành phần được hiển thị trong các lần sau. Hãy tìm hiểu về từng lifecycle method theo từng loại: Mounting, Updating và Unmounting:

Một thành phần thực hiện “mount” chỉ khi nó được hiển thị lần đầu tiên. Có 3 lifecycle methods cho công đoạn “mount”:

  • componentWillMount
  • render
  • componentDidMount

Khi một thành phần được “mount”, các phương thức lifecycle sẽ được tự động gọi theo thứ tự trên. Lifecycle method đầu tiên trong công đoạn “mount” là componentWillMount. Khi một thành phần được hiển thị lần đầu tiên, componentWillMount sẽ được gọi trước khi phần tử được hiển thị. Ví dụ:

var React = require('react');
var ReactDOM = require('react-dom');
var Example = React.createClass({
  componentWillMount: function () {
    alert('componentWillMount sẽ được gọi ở đây');
  },
  render: function () {
    return <h1>Hello world</h1>;
  }
});
ReactDOM.render(
  <Example />,
  document.getElementById('app')
);
setTimeout(function(){
  ReactDOM.render(
    <Example />,
    document.getElementById('app')
  );
}, 2000);

Trong đoạn mã trên, khi chạy, trong lần hiển thị đầu tiên, alert sẽ hiển thị thông báo “componentWillMount sẽ được gọi ở đây”, sau đó màn hình sẽ hiển thị văn bản “Hello world”. Trong các lần hiển thị sau, khi đang chạy trong setTimeout, lời gọi alert sẽ không được thực hiện nữa.

Sau khi componentWillMount hoàn thành, công đoạn “mount” tiếp theo là render (cho lần đầu tiên), sau đó là phương thức componentDidMount(), componentDidMount() được sử dụng rất nhiều. Nếu ứng dụng React của bạn sử dụng AJAX để lấy dữ liệu khởi tạo từ một API, thì componentDidMount là nơi để thực hiện lời gọi AJAX đó. Nói chung, componentDidMount là một nơi thích hợp để kết nối một ứng dụng React với một ứng dụng bên ngoài như một API web hoặc một framework JavaScript. componentDidMount cũng là nơi để xử lý các phương thức về thời gian như: setTimeout và setInterval.

var React = require('react');
var Example = React.createClass({
  componentDidlMount: function () {
    alert('component just finished mounting!');
  },
  render: function () {
    return <h1>Hello world</h1>;
  }
});

Sau khi thành phần được hiển thị lần đầu tiên, các phương thức lifecycle về công đoạn “updating” sẽ được gọi bắt đầu từ lần hiển thị thứ hai. Với cơ chế ràng buộc tự động, chắc chắn thành phần sẽ được hiển thị nhiều lần trong ứng dụng của bạn. Có 5 phương thức trong lifecycle updating:

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate
Có Thể Bạn Quan Tâm :  

Mỗi khi một phiên bản của thành phần được cập nhật, nó sẽ tự động gọi các phương thức trên theo thứ tự. Phương thức updating đầu tiên là componentWillReceiveProps, khi một phiên bản của thành phần được cập nhật, componentWillReceiveProps sẽ được gọi trước khi hiển thị. Cần chú ý rằng, componentWillReceiveProps chỉ được gọi nếu thành phần nhận được một prop:

// componentWillReceiveProps sẽ được gọi ở đây:
ReactDOM.render(
  <Example prop="myVal" />,
  document.getElementById('app')
);
// componentWillReceiveProps KHÔNG được gọi ở đây:
ReactDOM.render(
  <Example />,
  document.getElementById('app')
);

Hàm componentWillReceiveProps sẽ nhận tự động hai đối số, được gọi là nextProps, nextProps là giá trị prop sẽ được thành phần nhận để hiển thị. Ví dụ:

var React = require('react');
var Example = React.createClass({
  componentWillReceiveProps: function (nextProps) {
    alert("Xem props.text mới mà " + "tôi sắp nhận được: " + nextProps.text);
  },
  render: function () {
    return <h1>{this.props.text}</h1>;
  }
});
// Lần hiển thị đầu tiên sẽ không gọi đến
// componentWillReceiveProps:
ReactDOM.render(
  <Example text="Hello world" />,
  document.getElementById('app')
);
// Sau lần hiển thị đầu tiên,
// các lần hiển thị sau sẽ gọi đến
// componentWillReceiveProps:
setTimeout(function () {
  ReactDOM.render(
    <Example text="Hello world" />,
    document.getElementById('app')
  );
}, 1000);

Giá trị của nextProps.text trong componentWillReceiveProps là “Hello world”.

Phương thức updating thứ hai là shouldComponentUpdate. Khi một thành phần được cập nhật, shouldComponentUpdate sẽ được gọi sau componentWillReceiveProps nhưng trước khi render. Ví dụ:

var React = require('react');
var Example = React.createClass({
  getInitialState: function () {
    return {
      subtext: 'Đặt tôi trong thẻ <h2> đi.'
    };
  },
  shouldComponentUpdate: function (nextProps, nextState) {
    if ((this.props.text == nextProps.text) && (this.state.subtext == nextState.subtext)) {
      alert("Props và state không thay đổi, nên tôi sẽ không cập nhật!");
      return false;
    } else {
      alert("Được, tôi sẽ cập nhật.");
      return true;
    }
  },
  render: function () {
    return (
      <div>
        <h1>{this.props.text}</h1>
        <h2>{this.state.subtext}</h2>
      </div>
    );
  }
});

Hàm shouldComponentUpdate sẽ trả về true hoặc false. Nếu trả về true, quá trình cập nhật sẽ diễn ra bình thường. Nhưng nếu trả về false, tất cả các phương thức còn lại trong lifecycle updating sẽ không được gọi, bao gồm cả phương thức render và thành phần sẽ không được cập nhật. Hai đối số nextProps và nextState được truyền vào hàm shouldComponentUpdate, nextProps và nextState trỏ đến prop và state của các thành phần được truyền từ thành phần khác, hoặc có thể là giá trị prop và state nếu thành phần được cập nhật. shouldComponentUpdate kiểm tra hai giá trị này với prop và state hiện tại của nó. Nếu khác nhau, thành phần sẽ được cập nhật, nếu không khác nhau, thành phần sẽ không cập nhật. Điều này rất quan trọng nếu bạn muốn nâng cao hiệu suất của ứng dụng React của mình. Ví dụ:

var React = require('react');
var Example = React.createClass({
  getInitialState: function () {
    return {
      subtext: 'Đặt tôi trong thẻ <h2> đi.'
    };
  },
  shouldComponentUpdate: function (nextProps, nextState) {
    if ((this.props.text == nextProps.text) && (this.state.subtext == nextState.subtext)) {
      alert("Props và state không thay đổi, nên tôi sẽ không cập nhật!");
      return false;
    } else {
      alert("Được, tôi sẽ cập nhật.");
      return true;
    }
  },
  render: function () {
    return (
      <div>
        <h1>{this.props.text}</h1>
        <h2>{this.state.subtext}</h2>
      </div>
    );
  }
});

Phương thức thứ ba trong lifecycle updating là componentWillUpdate. Nó được gọi giữa shouldComponentUpdate và render. Nó cũng nhận vào hai đối số là nextProps và nextState.

var React = require('react');
var Example = React.createClass({
  componentWillUpdate: function (nextProps, nextState) {
    alert('Thành phần đang cập nhật! Sắp xong rồi!');
  },
  render: function () {
    return <h1>Hello world</h1>;
  }
});

Cần chú ý rằng bạn không thể gọi this.setState trong componentWillUpdate. Mục tiêu chính của componentWillUpdate là tương tác với các thành phần bên ngoài cấu trúc React. Nếu bạn cần thiết lập một cái gì đó bên ngoài React, ví dụ như kiểm tra kích thước cửa sổ hoặc tương tác với một API, thì componentWillUpdate là nơi thích hợp để thực hiện việc đó.

Có Thể Bạn Quan Tâm :   Game 2D là gì? Top 5+ game 2D đáng trải nghiệm nhất

Phương thức render là phương thức thứ tư và cuối cùng trong lifecycle updating, phương thức componentDidUpdate là phương thức cuối cùng. Khi một phiên bản thành phần được cập nhật, componentDidUpdate sẽ được gọi sau khi HTML render được tải xong.

var React = require('react');
var Example = React.createClass({
  componentDidUpdate: function (prevProps, prevState) {
    alert('Thành phần đã hoàn thành việc cập nhật!');
  },
  render: function () {
    return <h1>Hello world</h1>;
  }
});

Phương thức componentDidUpdate được tự động truyền vào hai đối số là prevProps và prevState. prevProps và prevState sẽ tham chiếu đến prop và state của thành phần trước khi quá trình cập nhật thành phần bắt đầu. Chúng ta có thể so sánh hai đối số này với giá trị prop và state hiện tại. componentDidUpdate thường được sử dụng để tương tác với một số thành phần bên ngoài trong môi trường React như trình duyệt hoặc các API. Nó tương tự như componentWillUpdate, chỉ khác là nó được gọi sau phương thức render.

Có Thể Bạn Quan Tâm :   Lễ Đen là gì? Lễ đen trong ăn hỏi thường là bao nhiêu tiền?

Quá trình unmounting của thành phần xảy ra khi thành phần bị xóa khỏi DOM. Điều này có thể xảy ra khi một DOM được render mà không có thành phần, hoặc khi người dùng chuyển hướng đến một trang web khác hoặc khi trình duyệt được đóng. Chỉ có một phương thức trong quá trình này là componentWillUnmount, componentWillUnmount sẽ được gọi trước khi thành phần bị xóa khỏi DOM. Nếu một thành phần khởi tạo bất kỳ phương thức nào mà yêu cầu phải làm sạch, thì componentWillUnmount sẽ là nơi bạn nên đặt phương thức làm sạch đó.

var React = require('react');
var Example = React.createClass({
  componentWillUnmount: function () {
    alert('Tạm biệt thế giới');
  },
  render: function () {
    return <h1>Hello world</h1>;
  }
});

Trên đây chúng ta đã đi qua từng bước trong toàn bộ vòng đời của một thành phần. Hi vọng với những giải thích trên, bạn đã có cái nhìn tổng quan về cách thành phần hoạt động trong React. Cảm ơn đã đọc!

Nguồn:

https://www.academy.com/

Back to top button