2015-01-08 22 views
5

私はある時点でその子に属する状態変数を読む必要があるコンポーネントを持っています。
この特定の状態変数を親に移動し、コールバックによって変更する必要がありますか?私はそれを見て、これのいくつかはおそらく間違っているとしてReact:子供の状態にアンチパターンでアクセスしていますか?

、これらは親に移動状態の長所と短所は以下のとおりです。

プロ:これは一方向のデータフローに多く付着するようだ 反応のマントラ。

Con:親の他の子は、状態の変更時に再レンダリングされます(実際のDOMではなく、まだパフォーマンスに影響を与える可能性があります)。

ここでベストプラクティスは何ですか?データフローのための

+0

「バックアップ」は必要な場所にあるため、バックアップを移動する必要があります。親コンポーネントがそれを必要とする場合、その変数は子コンポーネント内でもなぜですか? –

答えて

10

ベスト・プラクティスは、次のとおりです。親から子へ

  • :子から親に小道具
  • 経由:別に無関係なコンポーネントからハンドラ
  • 経由:メッセージバスを経由して

<Child onEvent={this.handleEvent}> 

親があります。

handleEvent: function(dataFromChild) { 

} 
+0

データを親に保存するのは気になりますが、 'state'には格納されず、クラス変数の中にデータが格納されるのですか?もし再レンダリングの必要がないのであれば? –

+1

@eye_mew:そうだと思います。インターバルのようなものをインスタンスに保存しても構いませんが、 'render'は' state'に入る必要があります。それ以外の場合、Reactは何か変更されたことを把握することができず、 'componentDidUpdate'のようなライフサイクルメソッドも(' prevState'にはデータが存在しないので)役に立たなくなります。 –

+0

も参照してください:[リアクションの考え方](http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html) –

2

ペトカが指摘したように、状態が上に住んでいる必要があります。
Thinking in Reactはよく説明しています。

親の他の子は、状態変更時に再レンダリングされます(実際のDOMではなく、パフォーマンスに影響を与える可能性があります)。

これを60fpsで実行しない限り、これを気付かれることはまずありません。
もしあなたがそうした場合、ReactはあなたがオプションのshouldComponentUpdate(およびPureRenderMixin)でカバーしました。

関連する問題