反応の研究ノート（A）

地元の暑さとホット・アップデートアップデート分析のWebPACKホット・ローダーを反応させます。

開発者はコードを変更した熱負荷のWebPACK-devのサーバーは、ページ全体を更新し、パッケージ化されています。部分的にはページを更新するように反応するホットローダーは、それだけで変更されたコードを置き換え、ページ全体をリフレッシュしません。しかし、それはHotModuleReplacement熱負荷のプラグインのWebPACKのを頼る必要があります

「反応ホットローダ」からインポート{AppContainer}。

レンダリング（
<AppContainer>
　　<コンテナ/>
</ AppContainer>、
アプリ
）。

2.redux分析

defaultState 0 =定数; 
constが減速を=（国家は= defaultState、アクション）=> { 
  スイッチ（action.type）{ 
    ケースは、 '追加'：
      国家action.payloadの+を返します。
    デフォルト：
      状態を返す; 
  } 
}; 

=減速状態をCONST（ 。1、{ 
  タイプ：「ADD」、
  ペイロード：2 
}）; 
上記のコードは、減速アクションと呼ばれるADD機能を受信した後、それは加算の演算結果として、新しい状態を返します。他の論理演算は、（例えば、減算など）、また、アクションに応じて実装されてもよいです。

推奨Reduxの莞島のチュートリアル、非常に明確https://github.com/kenberkeley/redux-simple-tutorial

息子は、（息子アセンブリ通信REACT）成分値を渡します。

親コンポーネントサブアセンブリは、値を渡します

　　1.コールサブアセンブリ定義属性<ヘッダタイトル= {this.state.msgは}> </ヘッダ> ----------サブアセンブリは、取得した親コンポーネントを使用するときthis.props.msg受け継がれたデータ

　　2.親コンポーネントは、サブ組立方法を渡します

　　　　親コンポーネント定義<ヘッダ方法= {this.method}>サブアセンブリの取得方法の親成分：<ボタンのonClick = {this.props.method}>メソッド呼び出し親要素</ボタン>

　　3.アセンブリは、親サブアセンブリthis.props.father.XXによって<ヘッダ父= {この}> </ヘッダ> ------>サブアセンブリまたはデータ取得のメソッドに渡されてもよいです

　　　　　　　　　　　　　　　　　 ^ ^ ^ ^ ^

　　　　　　　　　　　　　　　　　　|| || || || ||
説明：親コンポーネントだけでなく、サブアセンブリは、メソッドに渡すことができ、サブコンポーネントに値を渡すことができ、全体親アセンブリは、親コンポーネントサブアセンブリは値を通過させる、サブコンポーネントを通過しました。

データのサブコンポーネントを取得するためのイニシアチブの親コンポーネント

　　親コンポーネントが<ヘッダREF =「ヘッダ」> </ヘッダ>の指定値refサブアセンブリ呼び出し1、

　　2、全体サブthis.refs.header取得することで、親コンポーネント（DOM後の検索（アセンブリ）がロードされた）コンポーネントインスタンスを

チェック値の種類：defaultProps propsTypes

defaultProps：サンズのコンポーネント値では、値を渡すことがないときは、親コンポーネントのサブアセンブリサブアセンブリ呼び出された場合は、サブアセンブリで定義されたデフォルト値のdefaultPropsを使用することができます

propTypes：値コンポーネントによって渡された親の型の正当性を検証します

　　1、引入「プロプタイプ」からインポートPropTypes。

　　2、类.propTypes = {
　　　　名：PropTypes.string
　　　　}。

　　3. .defaultProps = {クラス

　　名：

}

注：両方のサブアセンブリで定義されています

データが反応する循環

コンストラクタ（小道具）{ 
    スーパー（小道具）。
    この.state（{ 
    リスト：[] 
}）
} 

レンダリング（）{
 <UL> 
{ 
    この.state.list.map（値、キー）{
       リターン <LIキーは= {キー}> {value.title} </李>      
     }     
}
 </ UL> 
}

レンダリング条件

　　説明：状態アセンブリによると、レンダリングコンポーネントの一部のみ、我々は条件がJavaScriptで同じように条件文を書くようなステートメントをレンダリング書くことができます：私はちょうど&&紹介事業者ではないだろう、レンダリングするための変数記憶素子および機能の使用を紹介しますと、に使用されるこれらの三項演算子

//要素を格納するために使用される変数は、
{成分（小道具）機能します

ボタンがありました。

　　constのisState = props.isState。

　　IF（isState）{

　　　　ボタン= <ボタン>退出</ボタン>

　　} 他{

　　　　ボタン= <ボタン>登陆</ボタン>

　　}

　　<div>あなた{ボタン} </ DIV>を返します。

レンダリング（）{ 
　<DIV> 
　　<コンポーネントisTrue = {偽} /> 
　</ div> 
}

//時々我々が点滅状況を発生させずにコンポーネントを切り替え、指定されたコンポーネントをレンダリングする、指定された値があるまで待機する必要があり、私はあなたが私たちの幸せを実現するために、レンダリング機能にはnullを返すことができないことができ、コンポーネントのレンダリングを防ぎます効果
<そのコンポーネント1 /> 
<COMPONENT2 /> // 2. 1二成分である

状態= { 
：IsFalse偽へ
} 

成分=（）=> {

　　CONST {}のgetData = this.props要求されたデータが戻りデータundefindで返されていないリターン//

　　CONST {isfalse} = this.state

　　IF（のgetData）{ 
　　　　IF（isfalse { 
　　　　　　リターン<コンポーネント1 /> 
　　　　}他{ 
　　　　　　リターン<COMPONENT2 /> 
　　　　} 
　　}そうでなければ{ 
　　　　戻りヌル
　　} 
}

レンダリング（）{ 
　<DIV> 
　{this.Component（）} 
　</ div> 
}

おすすめ