Apakah perbezaan antara kitaran hayat lama dan baru tindak balas-Soal Jawab bahagian hadapan-php.cn

Apakah perbezaan antara kitaran hayat lama dan baru tindak balas

青灯夜游

Lepaskan： 2022-07-13 19:13:46

asal

1829 orang telah melayarinya

Perbezaan antara kitaran hayat lama dan baru tindak balas: 1. Tiga cangkuk wasiat telah dialihkan daripada kitaran hayat baharu, iaitu componentWillMount, componentWillReceiveProps, dan componentWillUpdate 2. Dua cangkuk baharu telah ditambahkan pada kitaran hayat baharu, iaitu getDerivedStateFromProps (Get state derived from props) dan getSnapshotBeforeUpdate.

Apakah perbezaan antara kitaran hayat lama dan baru tindak balas

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

React mempunyai dua set kitaran hayat sebelum dan selepas versi 16.3, ia adalah versi lama, dan selepas itu, ia adalah versi baharu Walaupun terdapat perbezaan antara versi lama dan baharu ciri utama adalah serupa.

React Lifecycle (Lama)

Apakah perbezaan antara kitaran hayat lama dan baru tindak balas

Perlu ditekankan: componentWillReceiveProps Fungsi tidak akan dipanggil apabila prop dimasukkan untuk kali pertama Ia akan dipanggil hanya apabila prop dimasukkan selepas kali kedua (termasuk kali kedua) 🎜>Seperti injap, pengembalian. nilai (benar atau salah) diperlukan untuk menentukan sama ada status kemas kini ini perlu dipaparkan semula

Kitaran hayat bertindak balas (baharu)

Apakah perbezaan antara kitaran hayat lama dan baru tindak balas Perbezaan antara kitaran hayat lama dan baru tindak balas

Kitaran hayat baharuAlih keluar Tiga cangkuk wasiat ditambah, iaitu:

componentWillMount, componentWillReceiveProps, componentWillUpdate

Kitaran hayat baharu menambah dua cangkuk baharu, iaitu: 1,

getDerivedStateFromProps 🎜>: Dapatkan keadaan terbitan daripada prop

Menerima dua parameter: props, state

Mengembalikan objek keadaan Atau null, digunakan untuk mengubah suai nilai negara.
Senario penggunaan: Jika nilai keadaan bergantung pada prop pada bila-bila masa, anda boleh menggunakan getDerivedStateFromProps
2,
getSnapshotBeforeUpdate
: Dapatkan syot kilat sebelum mengemas kini (anda boleh mendapatkan data sebelum kemas kini)

Panggil

sebelum mengemas kini DOM untuk mengembalikan objek atau null, dan nilai pulangan dihantar kepada componentDidUpdate

componentDidUpdate(): Dipanggil selepas mengemas kini DOM

menerima tiga parameter: preProps, preState, snapshotValue

Kes penggunaan:

P dengan ketinggian tetap, tambah satu baris dengan kerap, supaya apabila menambah, ketinggian baris yang sedang dilihat kekal tidak berubah.

Nota:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4_getSnapShotBeforeUpdate的使用场景</title>
<style>
.list{
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news{
height: 30px;
}
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为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:[]}
 
componentDidMount(){
setInterval(() => {
//获取原状态
const {newsArr} = this.state
//模拟一条新闻
const news = &#39;新闻&#39;+ (newsArr.length+1)
//更新状态
this.setState({newsArr:[news,...newsArr]})
}, 1000);
}
 
getSnapshotBeforeUpdate(){
return this.refs.list.scrollHeight
}
 
componentDidUpdate(preProps,preState,height){
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}
 
render(){
return(
<div className="list" ref="list">
{
this.state.newsArr.map((n,index)=>{
return <div key={index} className="news">{n}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>,document.getElementById(&#39;test&#39;))
</script>
</body>
</html>

Salin selepas log masuk

Dalam React v16.3, terdapat perubahan kitaran hayat baharu. Kitaran hayat lama juga digunakan, tetapi amaran penamatan boleh dilihat pada konsol. Ia juga menggesa bahawa tiga cangkuk kitaran hayat akan ditamatkan, jadi cuba untuk tidak menggunakannya. Atau anda boleh menambah awalan

di hadapannya. [Cadangan berkaitan:

Tutorial video Redis

]UNSAFE_

Atas ialah kandungan terperinci Apakah perbezaan antara kitaran hayat lama dan baru tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!