Lifecycle pada React JS

Siklus Komponen

Setiap komponen dalam React memiliki siklus yang dapat kamu amati dan manipulasi selama tiga fase utamanya.

Tiga fase tersebut adalah: Mounting, Updating, and Unmounting.

Mounting

Mounting berarti menempatkan elemen ke dalam DOM.

React memiliki empat metode bawaan yang dipanggil, dalam urutan ini, saat memasang komponen:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

Metode render () diperlukan dan akan selalu dipanggil, yang lain adalah opsional dan akan dipanggil jika kamu mendefinisikannya.

A.      Metode Constructor

Metode constructor() dipanggil sebelum apa pun, ketika komponen diinisiasi, dan metode constructor() adalah tempat alami untuk mengatur keadaan awal dan nilai awal lainnya.

Metode constructor() dipanggil dengan props, sebagai argumen, dan kamu harus selalu mulai dengan memanggil super(props) sebelum yang lain, ini akan memulai metode konstruktor induk dan memungkinkan komponen mewarisi metode dari induknya (React.Komponen).

Contoh:

Memanggil metode constructor, oleh React, setiap kali kamu membuat komponen:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

B.     Metode getDerivedStateFromProps

Metode getDerivedStateFromProps () dipanggil tepat sebelum memberi elemen di DOM.

Ini adalah tempat untuk mengatur objek state berdasarkan awal props.

Dibutuhkan state sebagai argumen, dan mengembalikan objek dengan perubahan ke state.

Contoh di bawah ini dimulai dengan warna favorit menjadi “red”, tetapi metode getDerivedStateFromProps () memperbarui warna favorit berdasarkan atribut favcol:

Contoh

Metode getDerivedStateFromProps dipanggil tepat sebelum metode render:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}
 
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

C.     Metode Render

Metode render () diperlukan, dan merupakan metode yang sebenarnya menampilkan HTML ke DOM.

Contoh

Komponen sederhana dengan metode render () sederhana:

class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

D.     Metode componentDidMount

Metode componentDidMount () dipanggil setelah komponen diberikan.

Di sinilah kamu menjalankan pernyataan yang mengharuskan komponen sudah ditempatkan di DOM.

Contoh

Pada awalnya warna favorit saya merah, tapi beri saya sebentar, dan itu kuning:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

Updating

Fase berikutnya dalam Lifeclyce adalah komponen Updating.

Sebuah komponen diperbarui setiap kali ada perubahan dalam ini komponen stateatau props.

React memiliki lima metode bawaan yang dipanggil, dalam urutan ini, ketika komponen diperbarui:

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

Metode render () diperlukan dan akan selalu dipanggil, yang lain adalah opsional dan akan dipanggil jika kamu mendefinisikannya.

A.     Metode getDerivedStateFromProps

Juga pada update metode getDerivedStateFromProps dipanggil. Ini adalah metode pertama yang dipanggil ketika komponen diperbarui.

Ini masih merupakan tempat alami untuk mengatur objek negara berdasarkan alat peraga awal.

Contoh di bawah ini memiliki tombol yang mengubah warna favorit menjadi biru, tetapi karena metode getDerivedStateFromProps () dipanggil, yang memperbarui status dengan warna dari atribut favcol, warna favorit masih tetap berwarna kuning:

Contoh

Jika komponen di update, metode getDerivedStateFromProps () dipanggil:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}
 
ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));

B.     Metode shouldComponentUpdate

Dalam metode shouldComponentUpdate () kamu dapat mengembalikan nilai Boolean yang menentukan apakah React harus melanjutkan dengan memberi atau tidak.

Nilai standarnya benar.

Contoh di bawah ini menunjukkan apa yang terjadi ketika metode shouldComponentUpdate () mengembalikan false:

Contoh

Hentikan komponen rendering pada setiap update:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

Contoh

Contoh yang sama seperti di atas, tetapi kali ini metode shouldComponentUpdate () mengembalikan true sebagai gantinya:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

C.     Metode Render

Metode render () tentu saja dipanggil ketika komponen diperbarui, ia harus merender ulang HTML ke DOM, dengan perubahan baru.

Contoh di bawah ini memiliki tombol yang mengubah warna favorit menjadi biru:

Contoh

Klik tombol untuk membuat perubahan dalam status komponen:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

D.     Metode getSnapshotBeforeUpdate

Dalam metode getSnapshotBeforeUpdate () Anda memiliki akses ke alat peraga dan menyatakan sebelum pembaruan, yang berarti bahwa bahkan setelah pembaruan, kamu dapat memeriksa apa nilainya sebelum pembaruan.

Jika metode getSnapshotBeforeUpdate () hadir, kamu juga harus memasukkan metode componentDidUpdate () , jika tidak, Anda akan mendapatkan kesalahan.

Contoh di bawah ini mungkin terlihat rumit, tetapi yang dilakukannya hanyalah ini:

Ketika komponen sedang dipasang itu diberikan dengan warna favorit “merah”.

Ketika komponen telah dipasang, timer mengubah status, dan setelah satu detik, warna favorit menjadi “kuning”.

Tindakan ini memicu fase pembaruan, dan karena komponen ini memiliki metode getSnapshotBeforeUpdate (), metode ini dijalankan, dan menulis pesan ke elemen DIV1 yang kosong.

Kemudian metode componentDidUpdate () dijalankan dan menulis pesan di elemen DIV2 kosong:

Contoh

Gunakan metode getSnapshotBeforeUpdate () untuk mengetahui seperti apa objek keadaan sebelum pembaruan:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

E.     Metode componentDidUpdate

Metode componentDidUpdate dipanggil setelah komponen diperbarui di DOM.

Contoh di bawah ini mungkin terlihat rumit, tetapi yang dilakukannya hanyalah ini:

Ketika komponen sedang dipasang itu diberikan dengan warna favorit “merah”.

Ketika komponen telah dipasang, timer mengubah status, dan warnanya menjadi “kuning”.

Tindakan ini memicu fase upate, dan karena komponen ini memiliki metode componentDidUpdate, metode ini dijalankan dan menulis pesan dalam elemen DIV kosong:

Contoh

Metode componentDidUpdate dipanggil setelah pembaruan telah diberikan dalam DOM:

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

Unmounting

Fase berikutnya dalam siklus adalah ketika komponen dihapus dari DOM, atau unmount karena React suka menyebutnya.

React hanya memiliki satu metode bawaan yang dipanggil ketika komponen dilepas:

• componentWillUnmount()

A. Metode componentWillUnmount

Metode componentWillUnmount dipanggil ketika komponen akan dihapus dari DOM.

Contoh

Klik tombol untuk menghapus tajuk:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {show: true};
  }
  delHeader = () => {
    this.setState({show: false});
  }
  render() {
    let myheader;
    if (this.state.show) {
      myheader = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}
 
class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}
 
ReactDOM.render(<Container />, document.getElementById('root'));