Comment puis-je réinitialiser un composant de réaction, y compris tous les états accessibles de manière transitoire?

J'ai parfois des composants de réaction qui sont conceptuellement avec état que je souhaite réinitialiser. Le comportement idéal équivaudrait à supprimer l'ancien composant et à lire un nouveau composant vierge.

React fournit une méthode setStatequi permet de définir le propre état explicite des composants, mais qui exclut l'état implicite tel que le focus du navigateur et l'état du formulaire, et il exclut également l'état de ses enfants. Attraper tout cet état indirect peut être une tâche délicate, et je préférerais le résoudre de manière rigoureuse et complète plutôt que de jouer à un coup de taupe avec chaque nouvel état surprenant.

Existe-t-il une API ou un modèle pour faire cela?

Edit: J'ai fait un exemple trivial démontrant l' this.replaceState(this.getInitialState())approche et la contrastant avec l' this.setState(this.getInitialState())approche: jsfiddle - replaceStateest plus robuste.

Pour vous assurer que l'état implicite du navigateur que vous mentionnez et l'état des enfants sont réinitialisés, vous pouvez ajouter un keyattribut au composant de niveau racine renvoyé par render; quand il change, ce composant sera jeté et créé à partir de zéro.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Il n'y a pas de raccourci pour réinitialiser l'état local du composant individuel.

Vous devriez en fait éviter replaceStateet utiliser à la setStateplace.

La documentation indique que replaceState"peut être entièrement supprimé dans une future version de React". Je pense qu'il sera très certainement supprimé car replaceStatene correspond pas vraiment à la philosophie de React. Cela facilite le fait qu'un composant React commence à se sentir un peu comme un couteau suisse. Cela empêche la croissance naturelle d'un composant React de devenir plus petit et plus conçu à cet effet.

Dans React, si vous devez vous tromper sur la généralisation ou la spécialisation: visez la spécialisation. En corollaire, l'arborescence des états de votre composant doit avoir une certaine parcimonie (c'est bien d'enfreindre cette règle avec goût si vous échafaudez un nouveau produit de marque).

Quoi qu'il en soit, c'est comme ça que vous faites. Similaire à la réponse (acceptée) de Ben ci-dessus, mais comme ceci:

this.setState(this.getInitialState());

Aussi (comme Ben l'a également dit) afin de réinitialiser "l'état du navigateur", vous devez supprimer ce nœud DOM. Exploitez la puissance du vdom et utilisez un nouvel keyaccessoire pour ce composant. Le nouveau rendu remplacera ce composant en gros.

Référence: https://facebook.github.io/react/docs/component-api.html#replacestate

L'ajout d'un keyattribut à l'élément que vous devez réinitialiser le rechargera à chaque fois que le propsou l' stateassocié à l'élément changera.

key = {nouvelle date (). getTime ()}

Voici un exemple:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}