Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Lebenszyklus in React geben. Was sind die Vorsichtsmaßnahmen für die Verwendung des Lebenszyklus in React? Werfen wir einen Blick darauf.
Lebenszyklus
React ist ein Prozess zum Rendern von virtuellem DOM in reales DOM. Dieser Prozess wird als Lebenszyklus der Komponente bezeichnet. React unterteilt diesen Zyklus in drei Phasen, und jede Phase bietet zwei Verarbeitungsmethoden: Will und Did beziehen sich auf, bevor es passiert, und Did bezieht sich auf, nachdem es passiert.
Montage: Komponenten-Rendering-Prozess
componentWillMount()
componentDidMount()
Aktualisierung: Komponentenaktualisierungsprozess
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(object nextProps, object nextState)
-
componentDidUpdate(object prevProps, object prevState)
Unmounten: Komponentenentfernungsprozess
Mounting
bezieht sich auf das erste Rendern oder das erneute Rendern, nachdem die Komponente aus dem DOM entfernt wurde getDefaultProps
Ausführungsreihenfolge
getDefaultProps
getInitialState
componentWillMount nicht ausführen
render
componentDidMount
componentWillMount
Diese Methode wird zuvor aufgerufen render, auch Das heißt, das echte DOM-Element kann mit dieser Methode nicht abgerufen werden.
Diese Methode wird vor dem ersten Rendern und vor dem erneuten Rendern bei Statusänderungen ausgelöst.
componentDidMount
Diese Methode wird nach dem Rendern aufgerufen, dh diese Methode kann das echte DOM-Element direkt abrufen.
Diese Methode wird nach dem ersten Rendern und nach dem erneuten Rendern ausgelöst, wenn sich der Zustand ändert.
var MountingComponent = React.createClass({
componentWillMount: function(){
console.log(this.refs.h1) // undefined
},
componentDidMount: function(){
console.log(this.refs.h1) // h1 对象
},
render: function(){
return <h1 ref="h1">Lifecycle-Mounting</h1>;
}
})
ReactDOM.render(<MountingComponent />, document.getElementById('p1'));Nach dem Login kopieren
Aktualisierung
Es wird ausgelöst, wenn die Requisiten oder der Status der Komponente geändert werden
Ausführungssequenz
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
-
ComponentDidUpdate
componentWillReceiveProps
wird aufgerufen, wenn die Komponente eine neue Requisite empfängt. Diese Methode wird beim Initialisieren des Renderns nicht aufgerufen.
Die Methode akzeptiert einen Parameter
newProps: aktualisierte Requisiten
Hinweis: Requisiten können nicht manuell geändert werden. Das normale Szenario besteht darin, dass die aktuelle Komponente als untergeordnete Komponente aufgerufen wird und dann die Requisiten der Komponente geändert werden in der übergeordneten Komponente
shouldComponentUpdate
Nachdem die Komponente gemountet wurde, wird ShouldComponentUpdate jedes Mal aufgerufen, wenn setState aufgerufen wird, um zu bestimmen, ob die Komponente erneut gerendert werden muss. Gibt standardmäßig true zurück und muss neu gerendert werden. In komplexeren Anwendungen wirken sich einige Datenänderungen nicht auf die Schnittstellenanzeige aus. Sie können hier Entscheidungen treffen, um die Rendering-Effizienz zu optimieren.
Die Methode akzeptiert zwei Parameter
newProps: aktualisierte Requisiten
newState: aktualisierter Status
Die Methode muss boolen zurückgeben. Wenn true zurückgegeben wird, werden nachfolgende KomponentenWillUpdate, Render und ComponentDidUpdate ausgeführt. Andernfalls wird es nicht ausgeführt.
componentWillUpdate
wird aufgerufen, wenn die Komponente neue Requisiten oder einen neuen Status erhält, aber noch nicht gerendert wurde. Wird während der Initialisierung nicht aufgerufen.
Die Methode akzeptiert zwei Parameter
nextProps: zu aktualisierende Requisiten
nextState: zu aktualisierender Status
componentDidUpdate
wird sofort aufgerufen, nachdem die Komponente das Update abgeschlossen hat. Wird während der Initialisierung nicht aufgerufen.
Die Methode akzeptiert zwei Parameter
prevProps: Requisiten vor dem Update
nextState: Status vor dem Update
var UpdatingComponent = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
//当 state 发生改变的时候，state 对应的组件会重新挂载
//会触发 componentWillUpdate、componentDidUpdate
this.setState({data: this.state.data + 1})
},
//参数 newProps：已更新的 props
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECEIVE PROPS!', newProps)
},
//参数 newProps：已更新的 props
//参数 newState：已更新的 state
//必须要返回 boolen，true 则执行componentWillUpdate、render、componentDidUpdate。反之则不执行。
shouldComponentUpdate: function(newProps, newState){
console.log('shouldComponentUpdate',newProps, newState);
return (newState.data > 0 && newState.data % 2 == 0);
},
//参数 nextProps：将要更新的 props
//参数 nextState：将要更新的 state
componentWillUpdate: function(nextProps, nextState){
console.log(nextProps, nextState, this.refs.p1)
},
//参数 prevProps：更新前的 props
//参数 nextState：更新前的 state
componentDidUpdate: function(prevProps, prevState){
console.log(prevProps, prevState)
},
render: function(){
return (
<p>
<button onClick={this.setNewNumber}>INCREMENT</button>
<h3>{this.state.data}</h3>
</p>
);
}
})
ReactDOM.render(<UpdatingComponent/>, document.getElementById('p2'));Nach dem Login kopieren
Unmounting
在组件从 DOM 中移除的时候立刻被调用，这个阶段没有对应的 did 方法
componentWillUnmount
方法适用在父子组件的结构中，当某个条件符合的场景下，该子组件会被渲染
重新渲染的执行顺序
getInitialState
componentWillMount
render
componentDidMount
var ChildrenComponent = React.createClass({
componentWillUnmount: function(){
console.log('componentWillUnmount');
},
render: function(){
return <h3>{this.props.myNumber}</h3>
}
})
var UnmountingComponent = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
var content;
//当条件不符合时 ChildrenComponent 会被移除，然后会触发方组件的 componentWillUnmount 方法
//当条件重新符合时，会重新渲染组件 ChildrenComponent
if(this.state.data % 2 == 0){
content = <ChildrenComponent myNumber = {this.state.data}></ChildrenComponent>;
} else {
content = <h3>{this.state.data}</h3>;
}
return (
<p>
<button onClick = {this.setNewNumber}>INCREMENT</button>
{content}
</p>
);
}
})
ReactDOM.render(<UnmountingComponent/>, document.getElementById('p3'));Nach dem Login kopieren
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
react实现选中li高亮步骤详解
PromiseA+的实现步骤详解
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Lebenszyklusnutzung in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
