Der Unterschied zwischen dem alten und dem neuen Lebenszyklus von React: 1. Drei Willens-Hooks wurden aus dem neuen Lebenszyklus entfernt, nämlich ComponentWillMount, ComponentWillReceiveProps und ComponentWillUpdate. 2. Dem neuen Lebenszyklus wurden zwei neue Hooks hinzugefügt, nämlich GetDerivedStateFromProps (abgeleitet von props state) und getSnapshotBeforeUpdate.
Die Betriebsumgebung dieses Tutorials: Windows7-System, React18-Version, Dell G3-Computer.
React hat zwei Lebenszyklen vor und nach Version 16.3. Vor 16.3 war es die alte Version und danach die neue Version. Obwohl es alte und neue Versionen gibt, sind sie im Grunde gleich.
Reaktionslebenszyklus (alt)
Es ist hervorzuheben, dass die Funktion „componentWillReceiveProps“ nicht aufgerufen wird, wenn Requisiten zum ersten Mal übergeben werden. Sie wird erst aufgerufen, wenn Requisiten nach dem zweiten Mal (einschließlich des zweiten Mals) übergeben werden.
ShouldComponentUpdate ist wie ein Ventil und benötigt einen Rückgabewert (wahr oder falsch), um zu bestimmen, ob der Status dieser Aktualisierung neu gerendert werden muss.
Reaktionslebenszyklus (neu)
Der Unterschied zwischen dem alten und dem neuen Lebenszyklus von reagieren
Der neue Lebenszyklus entfernt drei Willens-Hooks, nämlich: ComponentWillMount, ComponentWillReceiveProps, ComponentWillUpdate
Der neue Lebenszyklus fügt zwei neue Hooks hinzu, nämlich:
1. getDerivedStateFromProps: Abgeleiteten Status von Requisiten abrufen
Akzeptiert zwei Parameter: props, state
Gibt ein Statusobjekt oder Null zurück, das zum Ändern des Statuswerts verwendet wird.
Verwendungsszenario: Wenn der Wert des Status jederzeit von Requisiten abhängt, können Sie getDerivedStateFromProps verwenden
2. getSnapshotBeforeUpdate: Holen Sie sich den Snapshot vor dem Update (Sie können die Daten vor dem Update abrufen)
Wird vor der Aktualisierung des DOM aufgerufen
Gibt ein Objekt oder Null zurück und der Rückgabewert wird an ComponentDidUpdate übergeben
ComponentDidUpdate(): Wird nach der Aktualisierung des DOM aufgerufen
Akzeptiert drei Parameter: preProps, preState, snapshotValue
Anwendungsfälle:
Das p mit fester Höhe fügt regelmäßig eine neue Zeile hinzu, sodass beim Hinzufügen einer neuen Zeile die Höhe der aktuell angezeigten Zeile unverändert bleibt.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate-Nutzungsszenarien</title><style>.list{width: 200px;height: 150px;background-color: skyblue ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- Bereiten Sie einen „Container“ vor –><div id="test"></div >< !-- React-Kernbibliothek vorstellen--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- React-dom vorstellen , wird verwendet, um die Reaktion auf den Betrieb von DOM zu unterstützen --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- Einführung babel zum Konvertieren von jsx in js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type="text/babel" >class NewsList erweitert React.Component{ state = {newsArr:[]} ComponentDidMount(){setInterval(() => {//Erhalten Sie den ursprünglichen Status const {newsArr} = this.state//Simulieren Sie eine Nachricht const news = ' News'+ (newsArr.length+1)//Status aktualisieren 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('test'))</script></body></html>veranschaulichen:
In React v16.3 werden neue Lebenszyklusänderungen eingeleitet. Es wird auch der alte Lebenszyklus verwendet, allerdings ist auf der Konsole eine Deprecation-Warnung zu sehen. Es erinnert auch daran, dass drei Lebenszyklus-Hooks veraltet sind. Versuchen Sie daher, sie nicht zu verwenden. Oder Sie können das Präfix UNSAFE_ davor einfügen.