Tutorial Bereaksi Komponen API Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Set Status: setState,Ganti Status: replaceState,Pengaturan properti: SetProps,Ganti Atribut: replaceProps,Update: forceUpdate,Dapatkan DOM Node: findDOMNode,Menganalisis komponen negara dipasang: isMounted,
Pada bagian ini kita akan membahas Bereaksi komponen API. Kami akan menjelaskan tujuh metode berikut:
setState(object nextState[, function callback])
Gabung NextState dan negara saat ini, dan re-render komponen. setState yang Bereaksi metode event handler dan meminta fungsi callback pembaruan UI utama dipicu.
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.
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') );
Contoh dengan mengklik tag h2 untuk membuat hit counter bertambah.
replaceState(object nextState[, function callback])
replaceState () metode setState () mirip, namun metode tersebut hanya disimpan negara NextState, negara asli tidak Status NextState akan dihapus.
setProps(object nextProps[, function callback])
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.
replaceProps(object nextProps[, function callback])
replaceProps () metode adalah SetProps serupa, tetapi akan menghapus asli
props
forceUpdate([function callback])
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.
DOMElement findDOMNode()
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.
bool isMounted()
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