Perbedaan antara life cycle lama dan baru dari react: 1. Tiga will hook telah dihilangkan dari life cycle baru, yaitu ComponentWillMount, ComponentWillReceiveProps, dan ComponentWillUpdate; (berasal dari status props) dan getSnapshotBeforeUpdate.
Lingkungan operasi tutorial ini: sistem Windows7, versi react18, komputer Dell G3.
React memiliki dua set siklus hidup sebelum dan sesudah versi 16.3. Sebelum 16.3 adalah versi lama, dan setelah itu adalah versi baru. Meskipun ada versi lama dan baru, pada dasarnya keduanya sama.
Siklus hidup React (lama)
Perlu ditekankan bahwa fungsi komponenWillReceiveProps tidak akan dipanggil ketika props diteruskan untuk pertama kalinya. Fungsi ini hanya akan dipanggil ketika props diteruskan setelah kedua kalinya (termasuk yang kedua kalinya).
mustComponentUpdate seperti katup dan memerlukan nilai kembalian (benar atau salah) untuk menentukan apakah status pembaruan ini perlu dirender ulang.
Siklus hidup React (baru)
Perbedaan antara siklus hidup reaksi lama dan baru
Siklus hidup baru menghilangkan tiga kaitan keinginan, yaitu: komponenWillMount, komponenWillReceiveProps, komponenWillUpdate
Siklus hidup baru menambahkan dua kaitan baru, yaitu:
1. getDerivedStateFromProps: Dapatkan status turunan dari props
Menerima dua parameter: props, state
Mengembalikan objek status atau null, digunakan untuk mengubah nilai status.
Skenario penggunaan: Jika nilai status bergantung pada props kapan saja, Anda dapat menggunakan getDerivedStateFromProps
2. getSnapshotBeforeUpdate: Dapatkan snapshot sebelum pembaruan (Anda bisa mendapatkan data sebelum pembaruan)
Dipanggil sebelum memperbarui DOM
Mengembalikan objek atau null, dan nilai kembalian diteruskan ke komponenDidUpdate
komponenDidUpdate(): dipanggil setelah memperbarui DOM
Menerima tiga parameter: preProps, preState, snapshotValue
Kasus penggunaan:
P dengan tinggi tetap menambahkan baris baru secara teratur, sehingga ketika menambahkan baris baru, tinggi baris yang sedang dilihat tetap tidak berubah.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate skenario penggunaan</title><style>.list{width: 200px;height: 150px;background-color: skyblue ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Siapkan "wadah" --><div id="test"></div >< !-- Perkenalkan pustaka inti reaksi--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Perkenalkan react -dom , digunakan untuk mendukung reaksi untuk mengoperasikan DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Perkenalkan babel untuk mengonversi jsx ke js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList extends React.Component{ state = {newsArr:[]} komponenDidMount(){setInterval(() => {//Dapatkan status asli const {newsArr} = this.state//Simulasikan berita const news = ' Berita'+ (newsArr.length+1)//Perbarui status this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} komponenDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - tinggi} render(){return(<div className="list" ref="list"> {ini. state.newsArr.map((n,index)=>{kembalikan <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM Daftar Berita/>,document.getElementById('test'))</script></body></html>menjelaskan:
Di React v16.3, perubahan siklus hidup baru diterapkan. Siklus hidup lama juga digunakan, namun peringatan penghentian dapat dilihat di konsol. Hal ini juga mengingatkan bahwa tiga kait siklus hidup tidak akan digunakan lagi, jadi cobalah untuk tidak menggunakannya. Atau Anda bisa menambahkan awalan UNSAFE_ di depannya.