コンポーネントコンポーネントクラスの外側にあるコンポーネント更新の反応を

Question

私はReactアプリケーションの作成にいくつか問題があります。

import React from 'react'; 

const VIEW_MAIN = 0; 
const VIEW_SUB = 1; 

const VIEWS = {}; 
VIEWS[VIEW_MAIN] = (<ViewMain someProps={...} />); 
VIEWS[VIEW_SUB] = (<ViewSub someProps={...} />); 

const AppContent = React.createClass({ 
    render() { 

     let renderDOM = null; 

     if(this.props.view === VIEW_MAIN) { 
      renderDOM = VIEWS[VIEW_MAIN]; 
     } 
     else { 
      renderDOM = VIEWS[VIEW_SUB]; 
     } 

     return (
      <div id="ViewContainer"> 
       {renderDOM} 
      </div> 
     ); 
    } 
}); 

あなたが "VIEWS" 定数変数が2つのビュー、VIEW_MAINとVIEW_SUBが含まれていることを見ることができます：ここで問題です。各ビューはReact Componentです。

両方のコンポーネントのプロパティは「someProps」と同じです。さて、これが問題です。 "AppContent"コンポーネントのプロパティを2つのReactコンポーネントの両方に追加したいのですが、もちろんクラス定義の外にあるため不可能です。

クラス定義に移動すると、問題はどこに置くべきか分かりません。私は "レンダリング"メソッドの中に入れるべきですか？レンダリングメソッドは何度も実行されるので、それは悪い考えです。

createClassを使用する代わりに "class"キーワードを使用すると、定義された "VIEWS"定数変数コードがコンストラクタ関数（コンストラクタ（））の内部にある場合でも可能です。

私は一時的にこのようなコードを入力：

const AppContent = React.createClass({ 
    _initViews() { 
     if(typeof this.VIEWS === 'undefined') { 
      this.VIEWS = {}; 
      this.VIEWS[VIEW_MAIN] = (<ViewMain someProps={this.props.some} />); 
      this.VIEWS[VIEW_SUB] = (<ViewSub someProps={this.props.some} />); 
    }, 
    render() { 
     this._initViews(); 

     ... 
    } 
}); 

を、私はクラスの中_initialViews方法を追加し、呼び出しをレンダリングするときにそれを実行します。それはうまく動作しますが、問題は、レンダリングAppContentコンポーネントで常に "_initViews"メソッドを実行しています。私は一度だけ実行したいと思うし、そのような反応を使うのは悪い考えだと思う。

Classキーワードを代わりに使用する必要がありますか？私が聞いたように、Reactの中には "setProps"メソッドがありますが、現在は非推奨です。また、setPropsメソッドを使うのは悪い考えです。

私は何を試していますか？それがあれば、それは私にアドバイスをいただきありがとうございます。

Answer 1

：https://facebook.github.io/react/docs/videos.html

とで考えるには、セクションを反応します。これらの機能をVIEWSを記入し、コンポーネント、複数回のレンダリングshouldComponentUpdateを使用することを回避するために<renderDOM someProps={this.props.some}/>

のようなもので{renderDOM}を交換するあなたのアプリでそれを呼び出します。それ以外の場合、コンポーネントが複数回再レンダリングされても、生成された仮想DOMがブラウザDOMと一貫性がある場合、それらのコンポーネントのページにはリフレッシュされません。

Answer 2

ReactJSは、アプリケーションの状態を描画することに関するすべてです。状態が変更されたら、アプリケーション全体を再度レンダリングします。トリックは、ReactJSは、バーチャルドームのおかげで、高速です。

質問に答える：コンポーネントを何回もレンダリングしても問題ありません。

紹介動画に見てみましょう：あなたはstateless functionsを実装する必要がありhttps://facebook.github.io/react/docs/thinking-in-react.html