Explication détaillée de l'utilisation du cycle de vie dans React

Cette fois je vais vous apporter une explication détaillée de l'utilisation du cycle de vie dans React Quelles sont les précautions d'utilisation du cycle de vie dans React. Voici des cas pratiques, jetons un coup d'oeil.

Cycle de vie

React est un processus de rendu du DOM virtuel en DOM réel. Ce processus est appelé le cycle de vie du composant. React divise ce cycle en trois étapes, et chaque étape fournit deux méthodes de traitement : will et did Will fait référence à avant que cela se produise, et did fait référence à après que cela se produise.

• Montage : processus de rendu des composants

• componentWillMount()

• componentDidMount()

• Mise à jour : processus de mise à jour des composants

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nextState)

• componentWillUpdate(objet nextProps, objet nextState)

• componentDidUpdate(objet prevProps, objet prevState)

• Démontage : Processus de suppression des composants

• componentWillUnmount()

• Cette étape Là Il n'y a pas de méthode did correspondante

Montage

fait référence au premier rendu ou au nouveau rendu après la suppression du composant du DOM. ne pas exécuter getDefaultProps

Ordre d'exécution

1. getDefaultProps

2. getInitialState

3. componentWillMount

4. render

5. componentDidMount

componentWillMount

Cette méthode est appelée avant render,C'est-à-dire que le véritable élément DOM ne peut pas être obtenu avec cette méthode.
Cette méthode est déclenchée avant le premier rendu et avant le prochain rendu lorsque l'état change.

componentDidMount

Cette méthode est appelée après le rendu, c'est-à-dire que cette méthode peut obtenir directement le véritable élément DOM.
Cette méthode est déclenchée après le premier rendu et après un nouveau rendu lorsque l'état change.

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

Mise à jour

Elle sera déclenchée lors du changement des accessoires ou de l'état du composant

Séquence d'exécution

1. componentWillReceiveProps

2. shouldComponentUpdate

3. componentWillUpdate

4. render

5. componentDidUpdate

componentWillReceiveProps

est appelé lorsque le composant reçoit un nouveau prop. Cette méthode ne sera pas appelée lors de l’initialisation du rendu.
La méthode accepte un paramètre
newProps : accessoires mis à jour
Remarque : les accessoires ne peuvent pas être modifiés manuellement. Le scénario normal est que le composant actuel est appelé en tant que composant enfant, puis les accessoires du composant sont modifiés. dans le composant parent

shouldComponentUpdate

Une fois le composant monté, ShouldComponentUpdate sera appelé à chaque fois que setState est appelé pour déterminer si le composant doit être restitué. Renvoie vrai par défaut et doit être restitué. Dans les applications plus complexes, certaines modifications de données n'affectent pas l'affichage de l'interface. Vous pouvez porter des jugements ici pour optimiser l'efficacité du rendu.
La méthode accepte deux paramètres
newProps : accessoires mis à jour
newState : état mis à jour
La méthode doit renvoyer boolen Si true est renvoyé, les composantsWillUpdate, render et componentDidUpdate suivants seront exécutés. Sinon, il ne sera pas exécuté.

componentWillUpdate

est appelé lorsque le composant reçoit de nouveaux accessoires ou un nouvel état mais n'a pas encore été rendu. Ne sera pas appelé lors de l'initialisation.
La méthode accepte deux paramètres
nextProps : accessoires à mettre à jour
nextState : état à mettre à jour

componentDidUpdate

est appelé immédiatement après que le composant ait terminé la mise à jour. Ne sera pas appelé lors de l'initialisation.
La méthode accepte deux paramètres
prevProps : props avant mise à jour
nextState : état avant mise à jour

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+的实现步骤详解

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!