Lingkaran kitaran hayat bertindak balas

Komponen React melalui peringkat yang berbeza dalam kitaran hayat aplikasi mereka, walaupun apa yang berlaku di belakang tabir mungkin tidak jelas.

Tahap ini termasuk:

• Gunung
• memperbaharui
• Nyahpasang
• Pengendalian ralat

Setiap peringkat mempunyai kaedah yang sama di mana tindakan tertentu boleh dilakukan pada komponen. Sebagai contoh, apabila mengambil data dari rangkaian, anda mungkin mahu memanggil fungsi yang mengendalikan panggilan API dalam kaedah componentDidMount() (tersedia dalam fasa gunung).

Memahami pendekatan kitaran hayat yang berbeza adalah penting untuk pembangunan aplikasi React, kerana ia membolehkan kita mencetuskan operasi dengan tepat apabila diperlukan tanpa dikelirukan dengan operasi lain. Artikel ini akan meliputi setiap kitaran hayat, termasuk kaedah yang ada dan jenis senario yang kami gunakan.

Fasa pemasangan

Fikirkan gunung sebagai peringkat awal kitaran hayat komponen. Komponen tidak wujud sebelum gunung berlaku - ia hanya melepasi DOM sehingga gunung itu berlaku dan menghubungkannya sebagai sebahagian daripada dokumen.

Sebaik sahaja komponen dipasang, kita boleh mengambil kesempatan daripada banyak kaedah: constructor() , render() , componentDidMount() , dan static getDerivedStateFromProps() . Setiap kaedah mempunyai tujuan tersendiri, mari kita lihat dengan teratur.

pembina ()

Kaedah constructor() diperlukan apabila menetapkan keadaan secara langsung pada komponen untuk mengikat kaedah bersama. Nampaknya ini:

 // Setelah komponen input mula pemasangan ...
pembina (props) {
  // ... tetapkan beberapa alat ...
  super (props);
  // ... dalam kes ini, itu adalah nama pengguna kosong ...
  this.state = {
    Nama Pengguna: ''
  };
  // ... kemudian mengikat kaedah yang mengendalikan perubahan input ini.handleInputChange = this.handleInputChange.bind (ini);
}

Adalah penting untuk mengetahui bahawa constructor adalah kaedah pertama yang dipanggil ketika membuat komponen. Komponen itu belum diberikan (akan datang), tetapi Dom sudah tahu dan kita boleh menyambungkannya sebelum ia membuatnya. Jadi ini bukan di mana kita panggil setState() atau memperkenalkan sebarang kesan sampingan, kerana komponen masih dalam fasa membina!

Saya telah menulis tutorial mengenai ref sebelum dan satu perkara yang saya perhatikan ialah apabila menggunakan React.createRef() , anda boleh menetapkan Ref dalam constructor . Ini adalah munasabah, kerana ref digunakan untuk menukar nilai tanpa prop atau perlu membuat semula komponen dengan nilai yang dikemas kini:

 pembina (props) {
  super (props);
  this.state = {
    Nama Pengguna: ''
  };
  this.InputText = React.Createref ();
}

render ()

Kaedah render() adalah di mana tanda komponen dipaparkan di hujung depan. Pengguna dapat melihat dan mengaksesnya pada masa ini. Jika anda pernah membuat komponen React, anda sudah biasa dengannya - walaupun anda tidak menyedarinya - kerana ia memerlukan tag output.

 Aplikasi Kelas memanjangkan React.Component {
  // Semasa proses gunung, sila beri kandungan berikut!
  render () {
    Kembali (
      <div>
        <p>Helo Dunia!</p>
      </div>
    )
  }
}

Tetapi itu bukan tujuan keseluruhannya render() ! Ia juga boleh digunakan untuk membuat array komponen:

 Aplikasi Kelas memanjangkan React.Component {
  render () {
    Kembali [
      <h2 id="Alat-JavaScript">Alat JavaScript</h2> ,
      <frontend></frontend>,
      <backend></backend>
    ]
  }
}

Malah serpihan komponen:

 Aplikasi Kelas memanjangkan React.Component {
  render () {
    Kembali (
      <react.fragment><p>Helo Dunia!</p></react.fragment>
    )
  }
}

Kami juga boleh menggunakannya untuk menjadikan komponen di luar hierarki DOM (serupa dengan portal React):

 // Kami membuat portal yang membolehkan komponen memindahkan portal kelas memanjangkan reaksi.component {
  // Pertama, kami membuat pembina elemen div () {
    super ();
    this.el = document.createElement ("div");
  }

  // selepas gunung, mari tambahkan elemen kanak -kanak komponen komponenDidMount = () => {
    portalroot.appendchild (this.el);
  };

  // Jika komponen dikeluarkan dari DOM, maka kami juga mengeluarkan unsur -unsur anaknya ComponentWillUnmount = () => {
    portalroot.removechild (this.el);
  };

  // Ah, sekarang kita boleh menjadikan komponen dan elemen anaknya menjadi () seperti yang diperlukan {
    const {children} = this.props;
    kembali reactDom.createportal (kanak -kanak, this.el);
  }
}

Sudah tentu render() boleh menjadikan nombor dan rentetan ...

 Aplikasi Kelas memanjangkan React.Component {
  render () {
    kembali "Hello World!"
  }
}

Dan nilai null atau boolean:

 Aplikasi Kelas memanjangkan React.Component {
  render () {
    Kembalikan null
  }
}

ComponentDidMount ()

Adakah nama componentDidMount() menunjukkan maksudnya? Kaedah ini dipanggil selepas komponen dipasang (iaitu disambungkan ke DOM). Dalam tutorial lain yang saya tulis tentang mendapatkan data dalam React, ini adalah di mana anda ingin membuat permintaan kepada API untuk mendapatkan data.

Kami boleh menggunakan kaedah pengambilan anda:

 perapian () {
  Ambil (`https: // jsonplaceholder.typicode.com/users`)
    .then (response => response.json ())
    .tua (data =>
      this.setState ({
        Pengguna: Data,
        Isloading: Salah,
      })
    )
  .catch (error => this.setState ({error, isloading: false}));
}

Kemudian hubungi kaedah dalam cangkuk componentDidMount() :

 componentDidMount () {
  this.fetchusers ();
}

Kami juga boleh menambah pendengar acara:

 componentDidMount () {
  el.addeventListener ()
}

Sangat ringkas, bukan?

statik getDerivedStateFromprops ()

Ini adalah nama yang sedikit verbose, tetapi static getDerivedStateFromProps() tidak begitu rumit kerana kedengarannya. Ia dipanggil sebelum render() kaedah fasa gunung dan sebelum fasa kemas kini. Ia mengembalikan objek untuk mengemas kini status komponen, atau null jika tidak ada kandungan yang akan dikemas kini.

Untuk memahami bagaimana ia berfungsi, mari kita melaksanakan komponen kaunter yang akan menetapkan nilai khusus untuk keadaan kaunternya. Status ini hanya akan dikemas kini apabila nilai maxCount lebih tinggi. maxCount akan diluluskan dari komponen induk.

Ini adalah komponen induk:

 Aplikasi Kelas memanjangkan React.Component {
  pembina (props) {
    Super (props)

    this.textInput = react.createref ();
    this.state = {
      Nilai: 0
    }
  }

  handleIncrement = e => {
    E.PreventDefault ();
    this.setState ({value: this.state.value 1})
  };

  handledecrement = e => {
    E.PreventDefault ();
    this.setState ({value: this.state.value - 1})
  };

  render () {
    Kembali (
      <react.fragment><p>Kiraan max: {this.state.value}</p>
           
          -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    )
  }
}

Kami mempunyai butang untuk meningkatkan nilai maxCount , yang kami lalui ke komponen Counter .

 Kaunter Kelas memanjangkan React.Component {
  Negeri = {
    Kaunter: 5
  }

  statik getDerivedStateFromprops (NextProps, Prevstate) {
    jika (prevstate.counter <nextprops.maxcount kembali nextprops.maxcount null render>
        <p>Count: {this.state.counter}</p>

      
    )
  }
}</nextprops.maxcount>

Dalam komponen Counter , kami periksa sama ada counter lebih kecil daripada maxCount . Jika ya, kami menetapkan counter dengan nilai maxCount . Jika tidak, kami tidak berbuat apa -apa.

Fasa kemas kini

Fasa kemas kini berlaku apabila prop komponen atau perubahan keadaan. Seperti gunung, kemas kini juga mempunyai kaedah sendiri yang tersedia, yang akan kami perkenalkan seterusnya. Iaitu, perlu diperhatikan bahawa render() dan getDerivedStateFromProps() juga akan membakar pada peringkat ini.

Harus komponenupdate ()

Apabila keadaan atau props perubahan komponen, kita boleh menggunakan kaedah shouldComponentUpdate() untuk mengawal sama ada komponen perlu dikemas kini. Kaedah ini dipanggil sebelum rendering berlaku dan apabila negeri dan prop diterima. Tingkah laku lalai adalah true . Untuk membuat semula setiap kali keadaan atau alat peraga berubah, kami melakukan ini:

 shouldComponentUpdate (NextProps, NextState) {
  kembali this.state.value! == NextState.Value;
}

Apabila false dikembalikan, komponen tidak akan dikemas kini, tetapi sebaliknya memanggil kaedah render() untuk memaparkan komponen.

getSnaphotBeforeUpdate ()

Satu perkara yang boleh kita lakukan ialah menangkap keadaan komponen pada satu ketika, iaitu apa yang getSnapshotBeforeUpdate() direka untuk. Ia dipanggil selepas render() tetapi sebelum melakukan apa -apa perubahan baru kepada DOM. Nilai pulangan diluluskan sebagai parameter ketiga kepada componentDidUpdate() .

Ia mengambil keadaan sebelumnya dan alat peraga sebagai parameter:

 GetSnapShotBeforeUpdate (PrevProps, Prevstate) {
  // ...
}

Pada pendapat saya, terdapat beberapa kes penggunaan untuk pendekatan ini. Ia adalah kaedah kitaran hayat yang mungkin tidak sering digunakan.

componentDidUpdate ()

Tambah componentDidUpdate() ke senarai kaedah, di mana nama itu secara kasar mengatakan segala -galanya. Jika komponen dikemas kini, maka kita boleh menggunakan kaedah ini untuk menyambungkannya pada masa ini dan lulus ke alat dan keadaan sebelumnya komponen.

 ComponentDidUpdate (PrevProps, Prevstate) {
  jika (prevstate.counter! == this.state.counter) {
    // ...
  }
}

Sekiranya anda pernah menggunakan getSnapshotBeforeUpdate() , anda juga boleh lulus nilai pulangan sebagai parameter kepada componentDidUpdate() :

 ComponentDidUpdate (PrevProps, Prevstate, snapshot) {
  jika (prevstate.counter! == this.state.counter) {
    // ....
  }
}

Fasa pemotongan

Kami hampir melihat kebalikan dari fasa gunung di sini. Seperti yang anda harapkan, penyahpasang berlaku apabila komponen dibersihkan dari DOM dan tidak lagi tersedia.

Kami hanya mempunyai satu kaedah di sini: componentWillUnmount()

Ini dipanggil sebelum komponen dipasang dan dimusnahkan. Di sinilah kami ingin melakukan pembersihan yang diperlukan selepas daun komponen, seperti mengeluarkan pendengar acara yang mungkin ditambah dalam componentDidMount() , atau membersihkan langganan.

 // Padam pendengar acara ComponentWillUnmount () {
  El.RemoveEventListener ()
}

Fasa pengendalian ralat

Mungkin terdapat masalah dalam komponen, yang boleh menyebabkan kesilapan. Kami telah menggunakan sempadan ralat untuk sementara waktu untuk membantu menyelesaikan masalah ini. Komponen sempadan ralat ini menggunakan beberapa kaedah untuk membantu kita menangani kemungkinan kesilapan.

getDerivedStateFromError ()

Kami menggunakan getDerivedStateFromError() untuk menangkap sebarang kesilapan yang dibuang dari komponen kanak -kanak, dan kemudian kami menggunakannya untuk mengemas kini keadaan komponen.

 Kelas RalatBoundary Extends React.Component {

  pembina (props) {
    super (props);
    this.state = {
      Haserror: Salah
    };
  }

  statik getDerivedStateFromError (ralat) {
    kembali {haserror: true};
  }

  render () {
    jika (this.state.hasError) {
      Kembali (
        <h1 id="Alamak-ada-yang-tidak-kena">Alamak, ada yang tidak kena :(</h1>
      );
    }

    kembali this.props.children;
  }
}

Dalam contoh ini, apabila ralat dilemparkan dari komponen kanak -kanak, komponen ErrorBoundary akan menunjukkan "Oh, beberapa masalah telah berlaku".

ComponentDidCatch ()

Walaupun getDerivedStateFromError() sesuai untuk mengemas kini keadaan komponen sekiranya berlaku kesan sampingan seperti pembalakan ralat, kita harus menggunakan componentDidCatch() kerana ia dipanggil semasa fasa komit, di mana masa DOM telah dikemas kini.

 ComponentDidCatch (ralat, info) {
  // kesilapan log ke perkhidmatan}

Kedua -dua getDerivedStateFromError() dan componentDidCatch() boleh digunakan dalam komponen ErrorBoundary :

 Kelas RalatBoundary Extends React.Component {

  pembina (props) {
    super (props);
    this.state = {
      Haserror: Salah
    };
  }

  statik getDerivedStateFromError (ralat) {
    kembali {haserror: true};
  }

  ComponentDidCatch (ralat, info) {
    // kesilapan log ke perkhidmatan}

  render () {
    jika (this.state.hasError) {
      Kembali (
        <h1 id="Alamak-ada-yang-tidak-kena">Alamak, ada yang tidak kena :(</h1>
      );
    }

    kembali this.props.children;
  }
}

Inilah kitaran hidup komponen React!

Ia adalah perkara yang menarik untuk memahami bagaimana komponen bertindak balas berinteraksi dengan DOM. Sangat mudah untuk berfikir bahawa beberapa "sihir" akan berlaku, dan kemudian sesuatu akan muncul di halaman. Tetapi kitaran hidup komponen React menunjukkan bahawa kegilaan ini teratur, dan ia bertujuan untuk memberi kita banyak kawalan ke atas apa yang berlaku dari masa komponen mencapai DOM hingga saat ia hilang.

Kami merangkumi banyak perkara dalam ruang yang agak singkat, tetapi diharapkan ini memberi anda idea yang baik tentang bagaimana React mengendalikan komponen dan keupayaan yang kami ada pada setiap peringkat pemprosesan. Jika anda tidak jelas tentang apa -apa yang diperkenalkan di sini, jangan ragu untuk bertanya apa -apa dan saya suka melakukan yang terbaik untuk membantu!

Atas ialah kandungan terperinci Lingkaran kitaran hayat bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!