Bereaksi komponen siklus hidup

Dalam bab ini kita akan membahas siklus hidup Bereaksi komponen.

siklus hidup komponen dapat dibagi menjadi tiga negara:

• Mounting: DOM benar telah dimasukkan
• Memperbarui: sedang re-diberikan
• Unmount: DOM benar telah dihapus

Metode siklus hidup adalah:

• componentWillMount sebelum menampilkan panggilan, layanan sisi klien juga.

• componentDidMount: setelah panggilan pertama untuk membuat hanya klien.Setelah komponen telah dihasilkan sesuai struktur DOM, dapat diakses melalui this.getDOMNode (). Jika Anda ingin menggunakan dengan kerangka kerja lainnya JavaScript, Anda dapat memanggil metode setTimeout ini, setInterval atau mengirim permintaan AJAX, dll (unit operasi yang berbeda untuk mencegah pemblokiran UI).

• componentWillReceiveProps disebut ketika komponen menerima prop baru.Metode ini tidak akan disebut selama inisialisasi render.

• shouldComponentUpdate mengembalikan nilai Boolean.Hal ini disebut ketika komponen menerima alat peraga baru atau negara. Hal ini tidak dipanggil inisialisasi atau menggunakan forceUpdate.
  Hal ini dapat digunakan ketika Anda tidak perlu mengkonfirmasi komponen diperbarui.

• componentWillUpdate dalam komponen menerima alat peraga baru atau negara tetapi tidak ada render disebut.Ini tidak akan dipanggil selama inisialisasi.

• Setelah update adalah komponencomponentDidUpdate lengkap disebut segera.Ini tidak akan dipanggil selama inisialisasi.

• componentWillUnmount segera memanggil ketika komponen dihapus dari DOM.

Sebuah penjelasan rinci tentang metode ini, Anda dapat merujuk ke dokumentasi resmi .

Contoh berikut Setelah komponen Hello dimuat, ditetapkan dengan metode waktu componentDidMount setiap 100 milidetik transparansi komponen ulang dan re-render:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Coba »

Contoh-contoh berikut diinisialisasinegara, setNewnumberuntuk memperbaruinegara.Semua komponen siklus hidupKonten.

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECIEVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

Coba »