Como posso redefinir um componente de reação, incluindo todos os estados transitivamente alcançáveis?

Ocasionalmente, tenho componentes de reação que são conceitualmente ativos e que desejo redefinir. O comportamento ideal seria equivalente a remover o componente antigo e reler um novo componente original.

React fornece um método setStateque permite definir o próprio estado explícito dos componentes, mas que exclui o estado implícito, como o foco do navegador e o estado do formulário, e também exclui o estado de seus filhos. Pegar todo esse estado indireto pode ser uma tarefa complicada, e eu prefiro resolvê-lo rigorosa e completamente, em vez de jogar o golpe-a-toupeira a cada novo estado surpreendente.

Existe uma API ou padrão para fazer isso?

Edit: Eu fiz um exemplo trivial demonstrando a this.replaceState(this.getInitialState())abordagem e contrastando-o com a this.setState(this.getInitialState())abordagem: jsfiddle - replaceStateé mais robusto.

Para garantir que o estado implícito do navegador que você mencionou e o estado dos filhos sejam redefinidos, você pode adicionar um keyatributo ao componente de nível raiz retornado por render; quando ele muda, esse componente é jogado fora e criado do zero.

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

Não há atalho para redefinir o estado local do componente individual.

Você deve realmente evitar replaceStatee usar em seu setStatelugar.

Os documentos dizem que replaceState"pode ​​ser totalmente removido em uma versão futura do React." Eu acho que definitivamente será removido porque replaceStaterealmente não combina com a filosofia do React. Facilita fazer um componente React começar a parecer uma espécie de faca suíça. Isso prejudica o crescimento natural de um componente React, tornando-se menor e mais específico.

No React, se você tem que errar na generalização ou na especialização: busque a especialização. Como corolário, a árvore de estado para o seu componente deve ter uma certa parcimônia (é bom quebrar essa regra de bom gosto se você estiver construindo um produto novo em folha).

De qualquer forma, é assim que você faz. Semelhante à resposta de Ben (aceita) acima, mas assim:

this.setState(this.getInitialState());

Além disso (como Ben também disse), para redefinir o "estado do navegador", você precisa remover esse nó DOM. Aproveite o poder do vdom e use um novo keysuporte para esse componente. A nova renderização substituirá esse componente no atacado.

Referência: https://facebook.github.io/react/docs/component-api.html#replacestate

Adicionar um keyatributo ao elemento que você precisa reinicializar irá recarregá-lo toda vez que propsou se stateassociar ao elemento mudar.

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

Aqui está um exemplo:

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