推移的に到達可能なすべての状態を含む反応コンポーネントをリセットするにはどうすればよいですか？

Question 1

時々、リセットしたい、概念的にステートフルな反応コンポーネントがあります。理想的な動作は、古いコンポーネントを削除して、新しい初期のコンポーネントを読み取ることと同じです。

ReactはsetState、コンポーネント自身の明示的な状態を設定できるメソッドを提供しますが、ブラウザーのフォーカスやフォームの状態などの暗黙の状態を除外し、その子の状態も除外します。そのすべての間接的な状態をキャッチするのは難しい作業です。私は、驚くべき状態のすべての新しいビットでモグラを叩くよりも、厳密かつ完全にそれを解決することを好みます。

これを行うためのAPIまたはパターンはありますか？

編集： 私は実証簡単な例作られたthis.replaceState(this.getInitialState())アプローチをし、それを対照的なthis.setState(this.getInitialState())アプローチ：jsfiddle - replaceStateより堅牢です。

Question 2

あなたが言及する暗黙のブラウザ状態と子の状態が確実にリセットされるようにするには、によって返されるルートレベルのコンポーネントにkey属性を追加できrenderます。変更されると、そのコンポーネントは破棄され、最初から作成されます。

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

個々のコンポーネントのローカル状態をリセットするショートカットはありません。

Question 3

代わりに実際に避けreplaceStateて使用する必要がありますsetState。

ドキュメントは、replaceState「Reactの将来のバージョンでは完全に削除される可能性がある」と述べています。replaceStateReactの哲学にあまり慣れていないので、間違いなく削除されると思います。これは、Reactコンポーネントにスイスナイフのような感覚を与えやすくします。これは、Reactコンポーネントが自然に成長して小さくなり、より目的に合わせて成長するのを妨げます。

Reactでは、一般化または特殊化について誤解する必要がある場合は、特殊化を目指してください。当然のことながら、コンポーネントの状態ツリーには一定の節約が必要です（ただし、ブランド全体の新製品を足場にする場合は、このルールを上品に破ることは問題ありません）。

とにかく、これはあなたがそれを行う方法です。上記のベンの（受け入れられた）回答に似ていますが、次のようになります。

this.setState(this.getInitialState());

また、（Benも言ったように）「ブラウザの状態」をリセットするには、そのDOMノードを削除する必要があります。vdomのパワーを活用し、keyそのコンポーネントに新しいプロップを使用します。新しいレンダリングは、そのコンポーネントの卸売を置き換えます。

リファレンス：https : //facebook.github.io/react/docs/component-api.html#replacestate

Question 4

key再初期化する必要のある要素に属性を追加すると、propsまたはstate要素への関連付けが変更されるたびに属性が再ロードされます。

key = {new Date（）。getTime（）}

次に例を示します。

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