Quelle est la différence entre l'ancien et le nouveau cycle de vie de React-Questions et réponses frontales-php.cn

Quelle est la différence entre l'ancien et le nouveau cycle de vie de React

青灯夜游

Libérer： 2022-07-13 19:13:46

original

1816 Les gens l'ont consulté

La différence entre l'ancien et le nouveau cycle de vie de React : 1. Trois hooks Will sont supprimés dans le nouveau cycle de vie, à savoir ComponentWillMount, ComponentWillReceiveProps et ComponentWillUpdate. 2. Deux nouveaux hooks sont ajoutés dans le nouveau cycle de vie, à savoir getDerivedStateFromProps ; (à partir des accessoires, obtenez l'état dérivé) et getSnapshotBeforeUpdate.

Quelle est la différence entre l'ancien et le nouveau cycle de vie de React

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

React a deux ensembles de cycles de vie avant et après la version 16.3. Avant la 16.3, c'était l'ancienne version, et après cela, c'était la nouvelle version. Bien qu'il existe des différences entre l'ancienne et la nouvelle version, les principales fonctionnalités sont similaires. .

Cycle de vie React (ancien)

Quelle est la différence entre lancien et le nouveau cycle de vie de React

Il convient de souligner que : la fonction componentWillReceiveProps ne sera pas appelée lorsque les accessoires sont transmis pour la première fois, seulement après la deuxième fois (y compris la deuxième fois) Sera appelé uniquement lorsque les accessoires sont passés

shouldComponentUpdateComme une valve, une valeur de retour (vrai ou faux) est nécessaire pour déterminer si l'état de cette mise à jour doit être restitué

Cycle de vie de React (nouveau)

Quelle est la différence entre lancien et le nouveau cycle de vie de React

La différence entre l'ancien et le nouveau cycle de vie de React

Le nouveau cycle de viea supprimétrois crochets de volonté, à savoir : componentWillMount, composantWillReceiveProps, composantWillUpdate

Le nouveau cycle de vie a ajouté deux hooks, à savoir :

1, getDerivedStateFromProps : obtient l'état dérivé des accessoires

accepte deux paramètres : accessoires, état
renvoie un objet d'état ou null , utilisé pour modifier la valeur de l'état.
Scénarios d'utilisation : si la valeur de l'état dépend des accessoires à tout moment, vous pouvez utiliser getDerivedStateFromProps

2, getSnapshotBeforeUpdate : obtenir l'instantané avant la mise à jour (vous pouvez obtenir les données avant la mise à jour)

L'appel de

avant la mise à jour du DOM renvoie un objet ou null, et la valeur de retour est transmise à composantDidUpdate

componentDidUpdate() : L'appel après la mise à jour du DOM

accepte trois paramètres : preProps, preState, snapshotValue

Cas d'utilisation :

P avec une hauteur fixe, ajoutez une ligne régulièrement, afin que lors de l'ajout d'une nouvelle ligne, la hauteur de la ligne actuellement affichée reste inchangée.

<!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>

Copier après la connexion

Explication :

Dans React v16.3, de nouveaux changements dans le cycle de vie sont introduits. L'ancien cycle de vie est également utilisé, mais un avertissement de dépréciation est visible sur la console. Cela indique également que trois hooks de cycle de vie seront obsolètes, alors essayez de ne pas les utiliser. Ou vous pouvez ajouter le préfixe UNSAFE_ devant.

【Recommandations associées : Tutoriel vidéo Redis】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!