ReactJS - Est-ce que le rendu est appelé chaque fois que «setState» est appelé?

React restitue-t-il tous les composants et sous-composants à chaque setStateappel?

Si oui, pourquoi? Je pensais que l'idée était que React rendait aussi peu que nécessaire - lorsque l'état changeait.

Dans l'exemple simple suivant, les deux classes s'affichent à nouveau lorsque vous cliquez sur le texte, malgré le fait que l'état ne change pas lors des clics suivants, car le gestionnaire onClick définit toujours statela même valeur:

this.setState({'test':'me'});

Je m'attendais à ce que les rendus ne se produisent que si les statedonnées avaient changé.

Voici le code de l'exemple, en tant que JS Fiddle et extrait de code intégré:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

React restitue-t-il tous les composants et sous-composants chaque fois que setState est appelé?

Par défaut - oui.

Il existe une méthode booléenne shouldComponentUpdate (object nextProps, object nextState) , chaque composant a cette méthode et il est responsable de déterminer "la mise à jour du composant (exécuter la fonction de rendu )?" chaque fois que vous changez d' état ou passez de nouveaux accessoires du composant parent.

Vous pouvez écrire votre propre implémentation de la méthode shouldComponentUpdate pour votre composant, mais l'implémentation par défaut retourne toujours true - ce qui signifie toujours réexécuter la fonction de rendu.

Citation de documents officiels http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Par défaut, shouldComponentUpdate renvoie toujours true pour éviter les bogues subtils lorsque l'état est muté sur place, mais si vous faites attention à toujours traiter l'état comme immuable et à lire uniquement les accessoires et l'état dans render (), alors vous pouvez remplacer shouldComponentUpdate avec une implémentation qui compare les anciens accessoires et l'état à leurs remplacements.

Prochaine partie de votre question:

Si oui, pourquoi? Je pensais que l'idée était que React rendait aussi peu que nécessaire - lorsque l'état a changé.

Il y a deux étapes de ce que nous pouvons appeler le «rendu»:

1. Rendu DOM virtuel: lorsque la méthode de rendu est appelée, elle retourne une nouvelle structure de dom virtuel du composant. Comme je l'ai mentionné précédemment, cette méthode de rendu est toujours appelée lorsque vous appelez setState () , car shouldComponentUpdate renvoie toujours true par défaut. Donc, par défaut, il n'y a pas d'optimisation ici dans React.

2. Rendu DOM natif: React ne modifie les nœuds DOM réels dans votre navigateur que s'ils ont été modifiés dans le DOM virtuel et aussi peu que nécessaire - c'est la grande fonctionnalité de React qui optimise la vraie mutation DOM et rend React rapide.

Non, React ne restitue pas tout lorsque l'état change.

• Chaque fois qu'un composant est sale (son état a changé), ce composant et ses enfants sont rendus de nouveau. Dans une certaine mesure, cela consiste à restituer le moins possible. Le seul moment où le rendu n'est pas appelé est lorsqu'une branche est déplacée vers une autre racine, où théoriquement nous n'avons pas besoin de restituer quoi que ce soit. Dans votre exemple, TimeInChildest un composant enfant de Main, il est donc également rendu à nouveau lorsque l'état des Mainmodifications.

• React ne compare pas les données d'état. Quand setStateest appelé, il marque le composant comme sale (ce qui signifie qu'il doit être restitué). La chose importante à noter est que bien que la renderméthode du composant soit appelée, le vrai DOM n'est mis à jour que si la sortie est différente de l'arborescence DOM actuelle (c'est-à-dire la différence entre l'arborescence DOM virtuelle et l'arborescence DOM du document). Dans votre exemple, même si les statedonnées n'ont pas changé, l'heure de la dernière modification a changé, ce qui rend le DOM virtuel différent du DOM du document, d'où la raison pour laquelle le HTML est mis à jour.

Même si cela est indiqué dans de nombreuses autres réponses ici, le composant doit soit:

• implémenter shouldComponentUpdatepour rendre uniquement lorsque l'état ou les propriétés changent

• passer à l'extension d'un PureComponent , qui implémente déjà une shouldComponentUpdateméthode en interne pour les comparaisons superficielles.

Voici un exemple d'utilisation shouldComponentUpdate, qui ne fonctionne que pour ce cas d'utilisation simple et à des fins de démonstration. Lorsque cette option est utilisée, le composant ne se restitue plus à chaque clic et est rendu lors de son premier affichage et après avoir été cliqué une fois.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Oui. Il appelle la méthode render () chaque fois que nous appelons setState à la place lorsque "shouldComponentUpdate" renvoie false.

Une autre raison de la "perte de mise à jour" peut être la suivante:

• Si le getDerivedStateFromProps statique est défini, il est réexécuté dans chaque processus de mise à jour conformément à la documentation officielle https://reactjs.org/docs/react-component.html#updating .
• donc si cette valeur d'état provient des accessoires au début, elle est écrasée dans chaque mise à jour.

Si c'est le problème, U peut éviter de définir l'état lors de la mise à jour, vous devez vérifier la valeur du paramètre d'état comme ceci

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Une autre solution consiste à ajouter une propriété initialisée à l'état et à la configurer la première fois (si l'état est initialisé à une valeur non nulle).

Pas tous les composants.

le statecomposant in ressemble à la source de la cascade d'état de l'ensemble de l'APP.

Ainsi, le changement se produit d'où l'appel de setState. L'arbre est rendersalors appelé de là. Si vous avez utilisé un composant pur, le rendersera ignoré.