Jak mogę zresetować komponent reagujący, w tym cały stan przejściowo osiągalny?

Czasami mam elementy reagujące, które są koncepcyjnie stanowe, które chcę zresetować. Idealne zachowanie byłoby równoznaczne z usunięciem starego komponentu i odczytaniem nowego, nieskazitelnego komponentu.

React udostępnia metodę, setStatektóra pozwala na ustawienie własnego jawnego stanu komponentów, ale wyklucza niejawny stan, taki jak fokus przeglądarki i stan formularza, a także wyklucza stan jej elementów podrzędnych. Wyłapywanie wszystkich tych stanów pośrednich może być trudnym zadaniem i wolałbym rozwiązać to rygorystycznie i całkowicie, zamiast grać w walenie w kreta z każdym nowym zaskakującym stanem.

Czy istnieje interfejs API lub wzorzec, aby to zrobić?

Edycja: Zrobiłem trywialny przykład demonstrujący this.replaceState(this.getInitialState())podejście i zestawiając je z this.setState(this.getInitialState())podejściem: jsfiddle - replaceStatejest bardziej wytrzymały.

Aby upewnić się, że niejawny stan przeglądarki, o którym wspominasz, i stan elementów podrzędnych, zostaną zresetowane, możesz dodać keyatrybut do składnika poziomu głównego zwracanego przez render; kiedy się zmieni, ten komponent zostanie wyrzucony i stworzony od podstaw.

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

Nie ma skrótu do resetowania stanu lokalnego poszczególnych składników.

Właściwie powinieneś unikać replaceStatei używać setStatezamiast tego.

Dokumenty mówią, że replaceState„może zostać całkowicie usunięte w przyszłej wersji React”. Myślę, że z całą pewnością zostanie usunięty, ponieważ replaceStatetak naprawdę nie pasuje do filozofii React. Ułatwia to sprawienie, by komponent React zaczął czuć się jak szwajcarski nóż. To przeszkadza naturalnemu wzrostowi komponentu React, który staje się mniejszy i bardziej celowy.

W Reakcie, jeśli musisz popełnić błąd przy generalizacji lub specjalizacji: dąż do specjalizacji. W konsekwencji drzewo stanu dla twojego komponentu powinno mieć pewną oszczędność (dobrze jest gustownie złamać tę zasadę, jeśli rusztujesz nowy produkt, który zyskuje na popularności).

W każdym razie tak to się robi. Podobna do odpowiedzi Bena (zaakceptowana) powyżej, ale w ten sposób:

this.setState(this.getInitialState());

Również (jak powiedział Ben), aby zresetować „stan przeglądarki”, musisz usunąć ten węzeł DOM. Wykorzystaj moc vdom i użyj nowego keyrekwizytu dla tego komponentu. Nowy render zastąpi hurtowo ten komponent.

Źródła: https://facebook.github.io/react/docs/component-api.html#replacestate

Dodanie keyatrybutu do elementu, który chcesz ponownie zainicjować, spowoduje ponowne załadowanie go za każdym razem, gdy element propslub zostanie stateskojarzony ze zmianą elementu.

klucz = {nowa data (). getTime ()}

Oto przykład:

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