¿Cómo puedo restablecer un componente de reacción, incluidos todos los estados accesibles transitivamente?

Ocasionalmente tengo componentes de reacción que tienen un estado conceptual que quiero restablecer. El comportamiento ideal sería equivalente a eliminar el componente antiguo y leer un componente nuevo y prístino.

React proporciona un método setStateque permite establecer el propio estado explícito de los componentes, pero que excluye el estado implícito, como el enfoque del navegador y el estado del formulario, y también excluye el estado de sus hijos. Capturar todo ese estado indirecto puede ser una tarea complicada, y prefiero resolverlo de manera rigurosa y completa en lugar de jugar a whack-a-mole con cada nuevo estado sorprendente.

¿Existe una API o patrón para hacer esto?

Editar: hice un ejemplo trivial que demuestra el this.replaceState(this.getInitialState())enfoque y lo contrasta con el this.setState(this.getInitialState())enfoque: jsfiddle - replaceStatees más robusto.

Para asegurarse de que se restablezca el estado implícito del navegador que menciona y el estado de los hijos, puede agregar un keyatributo al componente de nivel raíz devuelto por render; cuando cambie, ese componente se desechará y se creará desde cero.

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

No hay atajos para restablecer el estado local del componente individual.

En realidad, debería evitarlo replaceStatey utilizarlo setStateen su lugar.

Los documentos dicen que replaceState"puede eliminarse por completo en una versión futura de React". Creo que definitivamente se eliminará porque replaceStaterealmente no concuerda con la filosofía de React. Facilita hacer que un componente de React comience a sentirse como un cuchillo suizo. Esto contrarresta el crecimiento natural de un componente de React de volverse más pequeño y más hecho a propósito.

En React, si tiene que pecar de generalización o especialización: apunte a la especialización. Como corolario, el árbol de estado de su componente debe tener cierta parsimonia (sin embargo, está bien romper con buen gusto esta regla si está construyendo un nuevo producto flamante).

De todos modos así es como lo haces. Similar a la respuesta de Ben (aceptada) anterior, pero así:

this.setState(this.getInitialState());

Además (como también dijo Ben) para restablecer el "estado del navegador", debe eliminar ese nodo DOM. Aproveche el poder del vdom y use un nuevo keyaccesorio para ese componente. El nuevo render reemplazará ese componente al por mayor.

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

Agregar un keyatributo al elemento que necesita reinicializar, lo recargará cada vez que el propso stateasociado al elemento cambie.

clave = {nueva fecha (). getTime ()}

Aquí hay un ejemplo:

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