Come posso resettare un componente React incluso tutto lo stato transitivamente raggiungibile?

Occasionalmente ho componenti di reazione che sono concettualmente stateful che voglio ripristinare. Il comportamento ideale sarebbe equivalente a rimuovere il vecchio componente e leggere un nuovo componente incontaminato.

React fornisce un metodo setStateche consente di impostare il proprio stato esplicito dei componenti, ma che esclude lo stato implicito come il focus del browser e lo stato del form, ed esclude anche lo stato dei suoi figli. Cogliere tutto quello stato indiretto può essere un compito difficile, e preferirei risolverlo in modo rigoroso e completo piuttosto che giocare a whack-a-mole con ogni nuovo bit di stato sorprendente.

C'è un'API o un pattern per farlo?

Modifica: ho fatto un esempio banale dimostrando l' this.replaceState(this.getInitialState())approccio e confrontandolo con l' this.setState(this.getInitialState())approccio: jsfiddle - replaceStateè più robusto.

Per garantire che lo stato del browser implicito menzionato e lo stato dei figli vengano ripristinati, è possibile aggiungere un keyattributo al componente a livello di root restituito da render; quando cambia, quel componente verrà gettato via e creato da zero.

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

Non esiste una scorciatoia per ripristinare lo stato locale del singolo componente.

In realtà dovresti evitare replaceStatee usare setStateinvece.

I documenti dicono che replaceState"potrebbe essere rimosso completamente in una futura versione di React." Penso che sarà sicuramente rimosso perché replaceStatenon si concilia con la filosofia di React. Facilita il fatto che un componente React inizi a sembrare un coltello svizzero. Ciò contrasta la crescita naturale di un componente React che diventa più piccolo e più mirato.

In React, se devi sbagliare sulla generalizzazione o sulla specializzazione: punta alla specializzazione. Come corollario, l'albero degli stati per il tuo componente dovrebbe avere una certa parsimonia (va bene infrangere con gusto questa regola se stai impalcando un prodotto nuovo di zecca).

Comunque è così che lo fai. Simile alla risposta (accettata) di Ben sopra, ma in questo modo:

this.setState(this.getInitialState());

Inoltre (come ha detto anche Ben) per ripristinare lo "stato del browser" è necessario rimuovere quel nodo DOM. Sfrutta la potenza del vdom e usa un nuovo keypuntello per quel componente. Il nuovo rendering sostituirà quel componente all'ingrosso.

Riferimento: https://facebook.github.io/react/docs/component-api.html#replacestate

L'aggiunta di un keyattributo all'elemento che è necessario reinizializzare, lo ricaricherà ogni volta che propso si stateassocia all'elemento cambia.

chiave = {nuova data (). getTime ()}

Ecco un esempio:

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