La différence entre l'ancien et le nouveau cycle de vie de React : 1. Trois hooks Will ont été supprimés du nouveau cycle de vie, à savoir ComponentWillMount, ComponentWillReceiveProps et ComponentWillUpdate 2. Deux nouveaux hooks ont été ajoutés au nouveau cycle de vie, à savoir getDerivedStateFromProps ; (dérivé de l'état des accessoires) et getSnapshotBeforeUpdate.
L'environnement d'exploitation de ce tutoriel : système Windows7, 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 anciennes et des nouvelles versions, elles sont fondamentalement les mêmes.
Cycle de vie de réaction (ancien)
Il convient de souligner que la fonction composantWillReceiveProps ne sera pas appelée lorsque les accessoires seront transmis pour la première fois. Elle ne sera appelée que lorsque les accessoires seront transmis après la deuxième fois (y compris la deuxième fois).
ShouldComponentUpdate est comme une valve et nécessite une valeur de retour (vrai ou faux) pour déterminer si l'état de cette mise à jour doit être restitué.
Cycle de vie de React (nouveau)
La différence entre l'ancien et le nouveau cycle de vie de React
Le nouveau cycle de vie supprime trois hooks, à savoir : composantWillMount, composantWillReceiveProps, composantWillUpdate.
Le nouveau cycle de vie ajoute deux nouveaux hooks, à savoir :
1. getDerivedStateFromProps : obtenir l'état dérivé des accessoires
Accepte deux paramètres : props, state
Renvoie un objet d'état ou null, utilisé pour modifier la valeur de l'état.
Scénario d'utilisation : si la valeur de state dépend des accessoires à tout moment, vous pouvez utiliser getDerivedStateFromProps
2. getSnapshotBeforeUpdate : obtenez l'instantané avant la mise à jour (vous pouvez obtenir les données avant la mise à jour)
Appelé avant de mettre à jour le DOM
Renvoie un objet ou null et la valeur de retour est transmise à composantDidUpdate
composantDidUpdate() : appelé après la mise à jour du DOM
Accepte trois paramètres : preProps, preState, snapshotValue
Cas d'utilisation :
Le p avec une hauteur fixe ajoute régulièrement une nouvelle ligne, de sorte 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 scénarios d'utilisation</title><style>.list{width : 200px;height : 150px;background-color : skyblue ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Préparer un "conteneur" --><div id="test"></div >< !-- Présentez la bibliothèque principale de réaction--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- Présentez la réaction -dom , utilisé pour prendre en charge React pour faire fonctionner DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Présenter babel pour convertir jsx en 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(() => {//Obtenir l'état d'origine const {newsArr} = this.state//Simuler une news const news = ' News'+ (newsArr.length+1)//Statut de mise à jour this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} composantDidUpdate(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('test'))</script></body></html>illustrer:
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 rappelle é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.