0

アプリのデータが不変データに基づいて構築されており、アプリが高速再レンダリングのために shouldComponentUpdate() で「===」等値演算子を使用している場合、制御されたコンポーネント(入力ボックスなど) をどのよう に実装できるのだろうか。

深くネストされたデータと、階層の深いところにある制御されたコンポーネントを想定してみましょう。

ローカル コンポーネントの状態が使用されている場合 (setState()) は、これを通常どおりに実装すると、不変データが変更されていないため、コンポーネント階層のレンダリング プロセスが分岐をスキップする可能性があるため、react によって変更が認識されません。これを回避するには、すべてのローカル コンポーネントの状態がアプリケーションの状態にある必要があり、制御されたコンポーネントのすべてのイベント (入力ボックスへの入力など) によって不変データが変更される必要があります。

これは機能するはずですが、これは、不変データが使用されている場合に制御コンポーネントを実装する (唯一の) 方法ですか? これをすべてフラックス (アクションの起動、ストア データのフェッチなど) で行うと、入力ボックスに入力するような単純なことで、多くのオーバーヘッド/ラウンドトリップが発生する可能性があります。

4

2 に答える 2

0

ステートをストアに配置するか、ローカルに保持するかは、しばしばトレードオフになります。どちらのアプローチも、不変のコレクションでうまく機能します。

ローカル状態は setState を使用して処理され、直接 this.state アクセスはありません。JS 文字列は不変であるため、気にする必要はありません

onChange: function(event) {
  this.setState({value: event.target.value}); 
}

ストアへの送信はほとんど同じです。

onChange: function(event) {
  var flux = this.getFlux();
  flux.actions.setSomeValue(event.target.value);
}

Store はアクションを取得し、不変コレクションで update/updateIn を実行します

于 2015-02-17T16:57:13.883 に答える