Kitaran hayat komponen bertindak balas
Dalam bab ini kita akan membincangkan kitaran hayat komponen React.
Kitaran hayat komponen boleh dibahagikan kepada tiga keadaan:
Pemasangan: DOM sebenar telah dimasukkan
Mengemas kini: sedang dikemas kini Paparkan semula
Nyahlekap: Dialihkan keluar dari DOM sebenar
Kaedah kitaran hayat ialah:
componentWillMount dipanggil sebelum rendering, kedua-dua pada klien dan pada pelayan.
componentDidMount : Dipanggil selepas paparan pertama, sebelah pelanggan sahaja. Selepas itu, komponen telah menghasilkan struktur DOM yang sepadan, yang boleh diakses melalui this.getDOMNode(). Jika anda ingin menggunakannya dengan rangka kerja JavaScript lain, anda boleh memanggil setTimeout, setInterval atau menghantar permintaan AJAX dalam kaedah ini (untuk menghalang operasi asing daripada menyekat UI).
componentWillReceiveProps dipanggil apabila komponen menerima prop baharu. Kaedah ini tidak akan dipanggil semasa memulakan pemaparan.
shouldComponentUpdate Mengembalikan nilai Boolean. Dipanggil apabila komponen menerima prop atau keadaan baharu. Tidak dipanggil semasa permulaan atau semasa menggunakan forceUpdate.
Boleh digunakan apabila anda mengesahkan bahawa anda tidak perlu mengemas kini komponen.componentWillUpdate dipanggil apabila komponen menerima prop atau keadaan baharu tetapi belum dipaparkan. Tidak akan dipanggil semasa permulaan.
componentDidUpdate dipanggil serta-merta selepas komponen selesai mengemas kini. Tidak akan dipanggil semasa permulaan.
componentWillUnmount dipanggil serta-merta apabila komponen dialih keluar daripada DOM.
Untuk mendapatkan arahan terperinci tentang kaedah ini, sila rujuk dokumentasi rasmi.
Selepas komponen Hello dimuatkan, contoh berikut menetapkan pemasa melalui kaedah componentDidMount, menetapkan semula ketelusan komponen setiap 100 milisaat dan memaparkan semula:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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.getElementById('example')
);
</script>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Tata berikut dimulakan state, setNewnumber digunakan untuk mengemas kini state. Semua kitaran hayat berada dalam komponen Kandungan.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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')
);
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
