Wie kann ich eine Reaktionskomponente zurücksetzen, die alle transitiv erreichbaren Zustände enthält?

Ich habe gelegentlich reaktionsfähige Komponenten, die konzeptionell aussagekräftig sind und die ich zurücksetzen möchte. Das ideale Verhalten wäre gleichbedeutend mit dem Entfernen der alten Komponente und dem Lesen einer neuen, makellosen Komponente.

React bietet eine Methode setState, mit der der explizite Status der Komponenten festgelegt werden kann, die jedoch implizite Status wie Browserfokus und Formularstatus ausschließt und den Status der untergeordneten Komponenten ausschließt. Es kann eine schwierige Aufgabe sein, all diesen indirekten Zustand zu erfassen, und ich würde es vorziehen, ihn rigoros und vollständig zu lösen, anstatt mit jedem neuen überraschenden Zustand einen Schlag ins Maul zu spielen.

Gibt es eine API oder ein Muster, um dies zu tun?

Bearbeiten: Ich habe ein triviales Beispiel gemacht, das den this.replaceState(this.getInitialState())Ansatz demonstriert und dem this.setState(this.getInitialState())Ansatz gegenüberstellt: jsfiddle - replaceStateist robuster.

Um sicherzustellen, dass der von Ihnen erwähnte implizite Browserstatus und der Status der untergeordneten Elemente zurückgesetzt werden, können Sie der von zurückgegebenen Komponente auf Stammebene ein keyAttribut hinzufügen render. Wenn es sich ändert, wird diese Komponente weggeworfen und von Grund auf neu erstellt.

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

Es gibt keine Verknüpfung zum Zurücksetzen des lokalen Status der einzelnen Komponente.

Sie sollten tatsächlich vermeiden replaceStateund setStatestattdessen verwenden.

Die Dokumente sagen, dass replaceState"in einer zukünftigen Version von React möglicherweise vollständig entfernt wird". Ich denke, es wird definitiv entfernt, weil replaceStatees nicht wirklich mit der Philosophie von React übereinstimmt. Es erleichtert es, dass sich eine React-Komponente wie ein Schweizer Messer anfühlt. Dies wirkt dem natürlichen Wachstum einer React-Komponente entgegen, die kleiner und zweckmäßiger wird.

Wenn Sie in React auf Generalisierung oder Spezialisierung verzichten müssen, streben Sie eine Spezialisierung an. Als Konsequenz sollte der Statusbaum für Ihre Komponente eine gewisse Sparsamkeit aufweisen (es ist in Ordnung, diese Regel geschmackvoll zu brechen, wenn Sie ein brandneues Produkt auf den Markt bringen).

Wie auch immer, so machst du es. Ähnlich wie Bens (akzeptierte) Antwort oben, aber so:

this.setState(this.getInitialState());

Außerdem müssen Sie (wie auch Ben sagte) diesen DOM-Knoten entfernen, um den "Browser-Status" zurückzusetzen. Nutzen Sie die Kraft des Reiches und verwenden Sie eine neue keyRequisite für diese Komponente. Das neue Rendering ersetzt diese Komponente im Großhandel.

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

Wenn keySie dem Element, das Sie neu initialisieren müssen, ein Attribut hinzufügen, wird es jedes Mal neu geladen, wenn sich das Element ändert propsoder statedem Element zugeordnet wird.

key = {new Date (). getTime ()}

Hier ist ein Beispiel:

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