Detaillierte Erläuterung der Lebenszyklusnutzung in React

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

• componentWillUnmount()

• Diese Phase Da ist keine entsprechende did-Methode

Mounting

bezieht sich auf das erste Rendern oder das erneute Rendern, nachdem die Komponente aus dem DOM entfernt wurde getDefaultProps

Ausführungsreihenfolge

1. getDefaultProps

2. getInitialState

3. componentWillMount nicht ausführen

4. render

5. 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'));

Aktualisierung

Es wird ausgelöst, wenn die Requisiten oder der Status der Komponente geändert werden

Ausführungssequenz

1. componentWillReceiveProps

2. shouldComponentUpdate

3. componentWillUpdate

4. render

5. 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'));

Unmounting

在组件从 DOM 中移除的时候立刻被调用，这个阶段没有对应的 did 方法

componentWillUnmount

方法适用在父子组件的结构中，当某个条件符合的场景下，该子组件会被渲染

重新渲染的执行顺序

1. getInitialState

2. componentWillMount

3. render

4. 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'));

相信看了本文案例你已经掌握了方法，更多精彩请关注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!