シリーズライフサイクルフック関数を反応させましょう

###ライフサイクル機能とは何ですか

いくつかの段階で1成分の機能が自動的に実行されます。
-小道具や状態の変化は、自動的に機能をレンダリングする際に例えば、我々は、実行するためのレンダリング機能を使用しています。
-そのための機能がライフサイクルの関数でレンダリングします。
コンポーネントが作成されたとき2.コンストラクタが自動的に呼び出されます。しかし、彼は反応する一意ではない、だから、私たちはライフサイクルの関数として彼をリストされていないES6の関数です。

###ライフサイクルは4つの段階に分けています

1.初期化(コンポーネントの初期化)
-私たちは、なぜ機能コンポーネントを説明している、ライフサイクルおよび他の方法を使用することができます)(レンダリングするには、この基本クラスを継承するために反応するコンポーネントの基本クラスを反応させ、このコンポーネントの作成を継承する必要がありますこれらのメソッドは使用できません理由。コンポーネントは、使用するSETSTATE方法を行うことができます。
-我々は、注入アセンブリの小道具に送達親成分へのコンストラクタコンストラクタでスーパー(小道具)を使用して、コンポーネントを初期化this.stateこのプロパティを使用して。
-アクションのこのシリーズは、コンポーネントを初期化することです。
2.マウント(実装部品)
-この段階は、3つの期間に分割されている
(取り付け前)1. componentWillMount
-この機能は、DOM前の時間に実装部品を行うので、ここで引用SETSTATE方法は、ありません再レンダリングコンポーネントの原因となります。
-使用する配置コンストラクタコンストラクタも可能であるならば、ここで同じことを行います。
-コンポーネントがDOM前の時間に搭載されていると、この機能はのみ呼び出されます。他の回は、それがこの機能を起動しません。

2.レンダリング(に搭載)
-変化によるアセンブリ、すなわち、変更を行うか否か小道具および状態を、変化がここで留意すべきである、値が変更されません。限り再割り当てなど、古いものと新しい値が同じ実行されます。
-ページのDOMをレンダリングする要素に応じて、それ自体と反応した後、次いで反応させ要素(記載された成分、すなわちUI)を返し、コンポーネントは、実際のレンダリング作業を担当しません。純粋関数(純粋関数レンダリング:結果は唯一のパラメータに依存返す関数と、関数の実行副作用がない
- 、this.setStateで行うことができない成分側の状態を変化させます。

3. componentDidMount(完全マウント)
-ライフサイクルにAjaxの機能で、この要求に同意した
- DOMに実装される部品は、一度だけ、実行されました。
3.更新(コンポーネントのアップデート)
-まず、私たちはどのようなコンポーネントのアップデートを見てみましょう。唯一の状態でのコンポーネントのアップデートと呼ばれ、小道具は、SETSTATE機能または再割り当てする場合によって変化します。
- SETSTATEレンダリング機能は実装の親コンポーネントの原因となるだけでなく、実装のそのサブコンポーネントのレンダリング機能を引き起こします。
-その理由は、仮想DOMは差分アルゴリズム、ピア比較原理を反応させることです。
-限り、再割り当ては値が変更されていない場合は、コンポーネントを更新し、パフォーマンスを消費するだろうが、また、我々は欠点を言うために比較して、同じレベルの話をしている時に更新コンポーネント、されます。

-次に、我々は、それらの周期関数を見
1 componentWillReceiveProps(nextPropsを)
-このメソッドは、親コンポーネントに渡されたパラメータは、新しい小道具のnextProps電流成分であり、唯一の更新処理の小道具に起因する成分で呼び出されます。しかし、親コンポーネントを呼び出すために小道具の再送信の変化かどうかを確認するために、この方法ではので、この方法は、現在の小道具コンポーネントに変化しているが、再送保証するものではありませんレンダリング、そしてあなたがnextPropsとthis.propsに応じて実行したいものを変更した場合、例えば、現在の通話を再レンダリングするthis.setState新しい小道具に合わせて組立を開始

ShouldComponentUpdate 2.(nextProps、NextState)
-現在のコンポーネントの更新が利用可能として停止される場合は、この方法nextPropsを比較することにより、nextState及び電流成分をthis.props、this.state、電流成分は、更新処理を実行し続ける場合にtrueを返し、falseを返しますコンポーネントのパフォーマンスを最適化する必要がレンダリング成分を低減します。PS:ここでcomponentWillReceiveProps()はthis.setStateの実装では、状態を更新しても、見ることができるが、(例えばshouldComponentUpdate、componentWillUpdateように)レンダリングする前に、this.stateまだ更新前の状態をポイントし、そうでなければnextState電流成分対照的にthis.stateは真のされていると思います。

ComponentWillUpdate 3.(nextProps、NextState)
-コンポーネントの更新が発生する前にここで行わrenderメソッドを呼び出す前に、この方法は、一般的にあまり使用し、作業の一部を実行することができます。

4.レンダリング
-の上述の方法をレンダリングし、ちょうどここ振り返ります。

(prevProps、PrevState)5. ComponentDidUpdate
-このメソッドは、コンポーネントの更新後に起動され、更新されたコンポーネントが動作することができるDOM、prevProps PrevStateは、これら2つのパラメータと更新前のアセンブリを参照し、状態小道具
-最適化の欠点
- 1.ため親コンポーネントは、レンダリングと一緒にサブアセンブリにつながる、小道具を再割り当てすること、再レンダリングします。

/ ** 
*方法:上記の欠点を解決するために、関数がshouldComponentUpdate前に行ってもよい、コンポーネントアップデートを変更する小道具かどうか決定し、次いで再レンダリングを行うか否かを判定する。
* / 
クラスザがコンポーネントチャイルド{延び
shouldComponentUpdate(nextProps){ 
{(nextProps.value === this.props.value)IF 
偽に戻り
} 
trueに戻り
} 
(レンダリング)を{ 
}の<div> this.props.value {戻り</ DIV> 
} 
} 
/ ** 
*方法2:
* 1上記の欠点を解決するために、最初のサブアセンブリthis.props.value状態に割り当てることができる
まだcomponentWillReceiveProps機能において* 2、スタエ再利用するSETSTATEにプロパティの割り当てthis.props.value 
* 3に述べた文書は、第二のレンダリングを生じないでthis.setState機能(componentWillReceivePropsを)()を呼び出します。
* 4. componentWillReceivePropsのみ小道具の変更があるので、this.setStateは()状態に変化がなければならないときにトリガされているので
* / 
//
{子部品クラス延び
コンストラクタ(小道具){ 
;スーパー(小道具)
this.state = { 
サブアセンブリに割り当て// props.value this.props.value最初の状態:値
;} 
} 
// {componentWillReceiveProps(nextProps)小道具の変化は、この方法トリガするがある場合
this.setState({値:nextProps.valueを}) ; // 再割り当て、レンダリング原因
} 
)({レンダリング
</ DIVの<div> this.state.value {戻り} > 
} 
}

- 前記コンポーネント自体SETSTATEメソッド呼び出しが、その値は、状態に変化していません。

/ ** 
*レンダリング行う前shouldComponentUpdate変化による新旧の値を変更するか否かを判断する
* / 
クラスザを拡張テストコンポーネント{ 
コンストラクタ(小道具){ 
スーパー(小道具); 
this.state = { 
値:. 1 
} 
} 
shouldComponentUpdate(NextState){/ /新旧の値を変更するかどうかを決定するこの方法を使用すべきである
{(nextState.value === this.state.value)場合を
// falseを返すに戻るfalseに変更なし
} 
trueに戻り
} 

SETSTATE一方ChangeState =()=> {//呼び出ししかし、状態に変化がない
CONST値= this.state.value 
this.setState({ 
})
} 

レンダリング(){ 
リターン<DIV this.changeStateのonClick = {}>} {this.state.value </ div> 
} 
}

  

4.アンロード・フェーズ(componentWillUnmount)
-唯一のライフサイクルアプローチcomponentWillUnmount
-このメソッドは、コンポーネントがアンインストールされる前に、あなたがここにいくつかのクリーンアップ作業を行うことができます呼び出され、明確なDOM要素に使用される明確なタイマーコンポーネントとして手動で作成componentDidMountなどメモリリークを避けるためです。

コンポーネント継承が成分である成分に反応するため5.組み込み関数他のライフサイクル、他のライフサイクル機能が書き込むことができない、描画機能に加えて成分を反応させます

おすすめ

転載: www.cnblogs.com/boye-1990/p/11453735.html