ファイバ16のバージョンを反応させます
registerServiceWorkerの役割
オフネットワークの場合、PWAプログレッシブWebアプリケーション書かれた電話アプリアプリケーション、第二の訪問キャッシュ
ReactDOM.renderは、実際のDOMノード上のコンポーネントをマウントします
JSX文法は、HTML + JSカスタムコンポーネント（カスタムコンポーネント名は大文字でなければならない）の内部に書き込ま
バインド内の引数を渡すことができますバインド（これ、インデックス）
list.splice（インデックス1）の項目を削除
状態は変更が直接this.state.list.spliceないことはできません（インデックスを、1）
HTMLの構文解析可能なXSS攻撃
<LI dangerouslySetInnerHTML = {{__html：項目}}>
ラベル領域をクリックして展開します
<ラベルhtmlFor = "inputa">タイピング</ label>は
<入力されたID = "inputa" />
注意事項とその他の部分は、コンテンツが同じレベルに復帰することはできませんレンダリング
子ノードに直接組立状態を許可しない親を変更します。
最後の平面上に導入スタイル
この .setState（（PrevState）=> { 戻り {値：e.target.value} // 予め値を取得する必要が }）、またはそれは問題であり得ます
直接操作するDOMは、大多数は、DOM操作を命令型プログラミングやっていますさ
宣言された符号化データドライバ
一方向のデータフロー：親コンポーネントサブアセンブリサブアセンブリに渡された値をそのまま使用することができます
それ以外の場合はエラーになります
それは、複数のサブアセンブリ親成分データを修正することができるエラーが発生する可能性があるため利点は、エラーしにくいです
関数型プログラミングはテストに利便性をもたらします
propTypes和defaultPropsは からの輸入PropTypes「プロップタイプ」; // 规定类型 TodoItem.propTypes = { 試験：PropTypes.string.isRequired、 コンテンツ：PropTypes.string、 handItem：PropTypes.func、 IDX：PropTypes.number } // 默认值 TodoItem.defaultProps = { テスト：「こんにちは、世界" }
アレイのPropTypes.arrayOf（文字列、数値）コンテンツタイプ
oneOfType（[文字列、数]）は複数種類の一つであります
関係状態とレンダリング機能を小道具
場合組立直接状態変化や小道具再レンダリング方法
アセンブリはrenderメソッドを実行すると、それは方法が行われ、サブアセンブリでレンダリングされます
DOM DOMを生成すると、本来の性能を消費に置き換えられます
変更の少しは、DOMの新世代につながります
違いを見つけ、元のDOM DOMの新世代をして比較を行います。変更
DOMの変更された部分のみを交換してください
欠陥：パフォーマンスは明らかにされていません
改良：仮想DOMを生成する（DOMは、仮想のjsオブジェクトで、実際のDOMを記述するためにそれを使用）
<DIV ID = 'ABC'> AAA </ DIV>
React.createElement（「DIV」、{ID： 'ABC'}、ABC）
データは、仮想DOMの新世代を変更しました
そして、比較元の仮想DOMを行います
diffのアルゴリズムによって、異なる部分を見つけ、その後、部分的に直接DOMを操作を変更するために置き換え
JS JSオブジェクトは、小さな価格を生成しますが、DOMを生成するコストの高さ
限りDOMと関連する操作は、優れた性能を消費するように（それはより多くのまたは世代であるか否か）
現実的な仮想DOM DOM構造を作成します。
JSX - > createElementメソッド - >仮想DOM（JS Object）を生成 - >真のDOM
バイアスとの<div> AAA </ div>の効果の基礎となる方法が同じであるだけので、比較的単純な書き込み
JSX文法ではなく、真のDOM、単なるテンプレートです
だから、何のJSXの構文が存在しない場合でも、またのcreateElementで置き換えることができます
DOM DOM本当の仮想た後、前の世代で生成
仮想DOMの利点：
1.パフォーマンスが向上しました
2.エンド間でのアプリケーション（仮想DOMが真DOMを生成しない）コンポーネントは、ネイティブアプリケーションを生成することが実現されます
差分比較アルゴリズム仮想DOM（JSオブジェクト）
+キーの値が一致するよりも1兄弟
あなたは第二層のための同じ比率を続行した場合
行われていない場合、それはもはや次の層よりもではありません
利点は以下のとおりです。シンプルな整列アルゴリズム
なぜ非同期関数の形をSETSTATE必要があります
複数の操作は、仮想一つの操作にDOMコントラストの数の短期的還元に結合されてもよいです
より重要な意義のサイクル時間は、値とキーの関連付けを行います
なぜキー値はインデックスに設定されていません
インデックスは、インデックス他のdivに変更される可能性があり、配列要素の挿入divのため、
不安定なキー値が得られても意味の存在だろう
refは、使用中に反応します
<入力REF = {INP => this.inp = INP}>
使用中に、直接使用することができた場合this.inp
推奨しないREF
注：REFと一緒に使用し、不正な結果につながる可能性がSETSTATE
SETSTATEは非同期であるため
this.setState（（prevState）=> {}、（）=> {}）は、第2のパラメータはSETSTATEを実行した後に意味は、特定の操作を行います
これは、更新データの終了後に特定の動作の正しい実装を確保します
定期的な関数の宣言：
componentWillReceiveProps（小道具）
コンポーネントは、親コンポーネントからタイミングパラメータを受け入れる==>実行
限り機能を再レンダリングする親コンポーネントが実行されるように、レンダリング機能サブアセンブリが実行されます
別の言い方をすれば
初めて組立体の存在について、このコンポーネントは、実行されない場合
あなたは組み立て前のアセンブリに存在する親を持っている場合は、実行されます
コンポーネントは、コンポーネントの値は実行されない小道具親でない場合
shouldComponentUpdate返回BOOL
一度だけ
componentWillMount / componentDidMount / componentWillUnmount
使用シナリオのライフサイクル機能
1.入力値が変更され、それは状態につながるページの再レンダリングを変更します
パフォーマンスshouldComponentUpdateの無駄な使用
shouldComponentUpdate（nextProps、nxtState）{ 返す nextProps.contentを！== この .props.contentを？真：偽; }
AJAXリクエストを送信するとき、繰り返しレンダリング実行することができるように、レンダリングプロセスは、配置することができません
componentDidMount最高
componentWillMountは、ネイティブとの競合反応することができます
シミュレートされたデータを用いて、チャールズ・インターフェース componentDidMount（）{ axios.get（ '/ API / todolistの' ） .then（（RES） => { この .setState（（）=> [... res.data]：（{リスト}））; ツール-地元の地図
CSS过渡动画 （）{レンダリング リターン <断片> <divのクラス名= { この .state.isShowを？"表示"： "隠す"}>こんにちは、反応させ</ div> <ボタンのonClick = { この .handlerClick}> toogle </ボタン> </フラグメント> } .SHOW { 不透明： 1 。 トランジション：すべて1やすさ - で。 } .hide { 不透明度： 0 。 トランジション：すべて1やすさ - で。 }
アニメーションは、アニメーション@keyframesによって定義さ .hide { アニメーション：隠す -item 2Sをease- に転送; }プラス転送役割が最後のフレームアニメーションCSSスタイル記憶することである @keyframesを隠す - 項目{ 0％{ 不透明度： 1 。 色：赤; } 50％{ 不透明度： 0.5 ; 色：緑; } 100％{ 不透明度： 0 ; 色：青; } } エントリとすることができる順番に同じです
反応遷移グループのアニメーション糸のアドオンを使用してください
Reduxの基礎
場合コンポーネントツリー錯体、値によって面倒成分
公共エリアではなく、アセンブリ上のデータ
これは、直接、コンポーネントが自動的に感知するデータストアを変更
Reduxの=レデューサー+フラックス
フラックスリリースとフラックスと反応さは使用することが特に容易ではありません
帳簿を減速
コンポーネント - > ActionCreators - >店 - >レデューサー - >ストア - >コンポーネント
コンストラクタ（小道具）{ スーパー（小道具）。 この .state = store.getState（）。 }
制限の減速：減速状態を受け取ることができますが、絶対に状態を変更しません
NewStateには、店に戻りました
store.subscribe（（）=> { この.setState（store.getState（））
}）成分ストアフィードに
handlerChange（E）{ CONSTアクション = { タイプ： 'change_input_value' 、 値：e.target.value }; store.dispatch（アクション）; // ストアアクションに渡されるが }次に、ストア動作が自動的に減速機に転送されます IF（action.type === 'change_input_value' ）{ CONST NewStateにザ = JSON.parse（JSON.stringify（状態））; newState.inputVal = action.value; 戻りNewStateにザを; }
店に戻ってデータを返すに戻り、その後、元のデータストアを交換します
スプリットUIコンポーネントおよび容器アセンブリ
かかわらず、ロジックの愚かなページをレンダリングするUIコンポーネントページ
かかわらず、容器アセンブリ巧妙なページだけのロジック
ステートレスコンポーネントより高い性能は、それが機能です
いくつかの機能を実行するための通常のライフサイクルコンポーネント
使用可能なUIコンポーネント
Reduxのの設計および使用の三の原則
1.storeは、店舗の変化だけが唯一その内容を変更することができますです
2.減速が純粋な関数である（緑色固定出力固定入力差、副作用なし）
だから、時間に依存することと非同期操作が動作することはできません
例えば：newState.date =新しいDate（）のパラメータを直接変更するか、state.inputValue = action.value
データの減速を得るために店で、その後、店の更新に戻りました
代わりに改訂されたデータを減速機減速機は、直接店舗内のデータを変更してはならない理由は、これがあります
Reduxの成分componentDidMountに関するデータを取得する非同期要求を送信します
非同期Reduxの-サンクコードDidMountアセンブリを使用するアクションに内部から除去されます
constのcomposeEnhancers = typeofの窓=== 'オブジェクト' && ウィンドウ.__ REDUX_DEVTOOLS_EXTENSION_COMPOSE__？ ウィンドウ.__ REDUX_DEVTOOLS_EXTENSION_COMPOSEの__（{}）：構成し; constのエンハンサー = composeEnhancers（ applyMiddleware（サンク、...）、 ）; CONST店舗 = CREATESTORE（減速、エンハンサー）。
componentDidMount（）{ CONSTアクション = getInitData（）; //は、関数戻り store.dispatch（アクション）; // このステップは、非同期要求を送信する キャッシュバックアクションが関数である場合、それは、この機能の実装を見ていき }
componentDidMount（）{ CONSTアクション = getInitData（）; //は、関数戻り store.dispatch（アクション）; // このステップは、非同期要求を送信する キャッシュバックアクションが関数である場合、それは、この機能の実装を見ていき }
メソッドの非同期要求は関数内のコンポーネントのライフサイクル中に配置されている場合、コンテンツがより多く、及び試験（ライフサイクル機能をテストよりもテスト機能簡素）より便利であろう
Reduxのミドルウェア
中指だけの派遣にアクションや店舗のアップグレードの途中です
reset.cssを行くためにグローバルスタイルに追加し、異なるコアラベル上の異なる形式が異なる場合があります
背景サイズ：divの中に通常の大きさを表現しているので、画像が含まれています
IE8の互換性にのみ反応します
APIパブリックディレクトリの下に定義された特性を有する反応アプリが作成バックエンドアナログへのアクセスを要求するアドレス要求として使用することができます
文字列の配列を返すことができrenderメソッドと
ライフサイクル機能の数に放棄さReact16.4
componentWillUpdate componentWillReceiveProps
異なるres.send / res.json / res.sendfile応答内容
トップの特徴
window.scrollToは（0,0）
接続およびストア各コンポーネントのメソッド呼び出しがあれば、各データが変更されるように、接続されました
次いで、各コンポーネントが再レンダリングされるボックス内に、例えば、このデータ入力を変更しません
パフォーマンスが非常に低いです。
これで、すべてのコンポーネントに加えてcomponnentWillUpdate（）限り、関連するデータと自らの戻り真の独立はfalseを返します
コンポーネントPureComponentあなたは不変のデータの使用を管理するために必要なすべてのコンポーネントを変更継承するか、それがピットます
htmlタグの消費性能をロードしますジャンプページを使用しないでください
'反応-router-からインポート{リンク} DOM'
<= '/詳細'へのリンク>
ルーティングパラメータ取得
<=へのリンク"/詳細/：ID">
<リンクへ= { "/詳細/" + "ABC">
<ルートパス= "/詳細/：ID">
第二の方法 は、<linkへ= {「/詳細？上記ID =」+「ABC」> <ルートパス=「/詳細」> これはに合わせることができ 、この文字列を解析する.props.location.searchだけでなく、独自の
innerRefによって得られるスタイリング成分、元のDOM構造
非同期成分糸は反応し、ロード可能な追加します
最初のパラメータは、コンポーネントアセンブリが装填中に示されている第二のパラメータをロードすることです
axios 拦截器
在使用express中使用 cookie 依赖 cookie-parse
1. swiper loop 设为 true 时，同时有改变了 slidePreview 的值，这时轮播时，按prev按钮到第一个时
会出现空白页 解决办法： slidePrerview 设置为 auto loopSliders 设置为你要显示的 slide个数
2. swiper-slide 为动态添加的内容 时 swiper的滑动效果会消失
解决办法： 初始化中设置 observer 为true observerParent 为true
componentDidCatch(error, errorInfo){} 出错的生命周期函数