Bereaksi Komponen API

Pada bagian ini kita akan membahas Bereaksi komponen API. Kami akan menjelaskan tujuh metode berikut:

• Set Status: setState
• Ganti Status: replaceState
• Pengaturan properti SetProps
• Ganti replaceProps properti
• Update: forceUpdate
• Dapatkan DOM Node: findDOMNode
• Menganalisis komponen negara dipasang: isMounted

Set Status: setState

setState(object nextState[, function callback])

parameter Deskripsi

• NextState, negara baru yang akan mengatur, status dan gabungan negara saat
• callback, parameter opsional, fungsi callback. Fungsi ini akan diberikan dalam sukses setState Dipanggil setelah perakitan ulang rendering.

Gabung NextState dan negara saat ini, dan re-render komponen. setState yang Bereaksi metode event handler dan meminta fungsi callback pembaruan UI utama dipicu.

Tentang setState

Anda tidak dapat mengubah komponen internal oleh negara this.state, karena negara akan menggantikan setState panggilan () setelah.

setState () tidak berubah this.state segera, tapi akan segera membuat pengobatan negara. setState () tidak harus disinkronkan dalam rangka meningkatkan kinerja akan Bereaksi negara eksekusi batch dan DOM rendering.

setState () selalu memicu perakitan redraw, kecuali sejumlah kondisi untuk mencapai shouldComponentUpdate () dalam memberikan logika.

contoh

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

Coba »

Contoh dengan mengklik tag h2 untuk membuat hit counter bertambah.

Ganti Status: replaceState

replaceState(object nextState[, function callback])

• NextState, negara baru akan dibentuk, yang akan menggantikan keadaan saat negara.
• callback, parameter opsional, fungsi callback. Fungsi ini akan disediakan di replaceState sukses Dipanggil setelah perakitan ulang rendering.

replaceState () metode setState () mirip, namun metode tersebut hanya disimpan negara NextState, negara asli tidak Status NextState akan dihapus.

Pengaturan properti: SetProps

setProps(object nextProps[, function callback])

• nextProps, properti baru akan ditetapkan, dan status alat peraga merger
• callback, parameter opsional, fungsi callback. Fungsi ini akan disediakan di SetProps sukses Dipanggil setelah perakitan ulang rendering.

Pengaturan properti komponen, dan re-render komponen.

aliran data alat peraga komponen setara, itu akan selalu diwariskan dari orang tua kepada semua komponen sub-perakitan. Ketika JavaScript eksternal dan integrasi aplikasi, kita mungkin perlu untuk melewatkan data ke komponen atau melihat React.render () komponen perlu kembali membuat, Anda dapat menggunakan SetProps ().

Perbarui komponen React.render saya bisa menelepon lagi pada node () menjadi () metode untuk mengubah properti komponen oleh SetProps, memicu rendering ulang komponen.

Ganti Atribut: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, properti baru yang akan ditetapkan, properti ini akan menggantikan alat peraga saat ini.
• callback, parameter opsional, fungsi callback. Fungsi ini akan disediakan di replaceProps sukses Dipanggil setelah perakitan ulang rendering.

replaceProps () metode adalah SetProps serupa, tetapi akan menghapus asli

props

Update: forceUpdate

forceUpdate([function callback])

parameter Deskripsi

• callback, parameter opsional, fungsi callback. Fungsi ini akan dipanggil setelah komponen render () metode panggilan.

forceUpdate () metode menyebabkan komponen yang menyebut dirinya render () metode untuk kembali membuat komponen sub-perakitan, komponen akan memanggil membuat Anda sendiri (). Namun, ketika perakitan ulang diberikan, dan masih membaca this.state this.props, jika negara tidak berubah, kemudian bereaksi hanya diperbarui DOM.

forceUpdate () metode cocok untuk this.props luar dan redraw this.state komponen (seperti: perubahan this.state setelah), diberitahukan oleh metode Bereaksi panggilan render ()

Secara umum, Anda harus menghindari menggunakan forceUpdate (), dan membaca hanya this.props dan this.state negara dipicu oleh Bereaksi render () panggilan.

Dapatkan DOM Node: findDOMNode

DOMElement findDOMNode()

• Kembali Nilai: elemen DOM DOMElement

Jika komponen telah terpasang dengan DOM, metode mengembalikan peramban lokal DOM elemen yang sesuai. Ketika membuat null atau salah ketika, this.findDOMNode () akan mengembalikan null. Baca dari nilai DOM, pendekatan ini berguna, seperti: Mendapat nilai bidang bentuk dan melakukan beberapa manipulasi DOM.

Menganalisis komponen negara dipasang: isMounted

bool isMounted()

• Kembali Nilai: benar atau salah, menunjukkan apakah komponen tersebut dipasang untuk DOM

Metode isMounted () digunakan untuk menentukan apakah komponen yang dipasang ke DOM. Anda dapat menggunakan metode ini untuk memastikan bahwa setState () dan forceUpdate () panggilan dalam skenario asynchronous tidak bisa salah.

Disini sebagai referensi: http: //itbilu.com/javascript/react/EkACBdqKe.html