Reactライフサイクルと仮想DOM
2062 ワード
一.バーチャルDOM
1.ReactはDOMを直接操作しないで、Reactの中のrenderの方法、1つのDOMの説明を返して、ReactはこのDOMの説明をメモリの中の表現と比較することができて、それから最も速い方法でブラウザを更新します
2.Reactは一連のイベントシステムを実現し、すべてのイベントオブジェクトがW 3 C仕様に合致し、イベントバブルがブラウザにまたがってサポートされている.HTML 5イベントは使用できますが、古いブラウザではサポートされていません.
二.Refs and findDOMNode()
1.ブラウザと対話すると、DOMノードの参照が必要になります.refプロパティを任意の要素に追加できます.これにより、コンポーネントがサポートするインスタンスを参照できます.コンポーネントの関数を呼び出したり、アクセスしたりする場合は、コンポーネントがサポートするインスタンスを参照できます.
最下位のDOMノード、それはとても役に立ちます.この文章でrefに関する知識をもっと勉強します.
三.ライフサイクル
Reactでは、コンポーネントのライフサイクルには、初期フェーズ、更新フェーズ、破棄フェーズの3つのフェーズがあります.
初期フェーズ:コンポーネントがDOMに挿入されます
更新フェーズ:DOMを更新する必要がある場合は、コンポーネントを再レンダリングします.
破棄フェーズ:DOMからコンポーネントを除去する
この3つの段階でreactはいくつかのフック関数を提供した.総じて言えば、WillメソッドとDidメソッドです.Willメソッドはイベントが発生する前に実行され、Didメソッドはイベントが発生した後に実行されます.
1.初期化フェーズ
(1)
(2)
(3)
2.更新フェーズ
(1)
この新しいプロパティを変更
(2)
このフェーズの後続のフック関数も呼び出されません
(3)
(4)
≪ステータス|Status|emdw≫
3.破棄フェーズ
転載先:https://www.cnblogs.com/QxQstar/p/5895350.html
1.ReactはDOMを直接操作しないで、Reactの中のrenderの方法、1つのDOMの説明を返して、ReactはこのDOMの説明をメモリの中の表現と比較することができて、それから最も速い方法でブラウザを更新します
2.Reactは一連のイベントシステムを実現し、すべてのイベントオブジェクトがW 3 C仕様に合致し、イベントバブルがブラウザにまたがってサポートされている.HTML 5イベントは使用できますが、古いブラウザではサポートされていません.
二.Refs and findDOMNode()
1.ブラウザと対話すると、DOMノードの参照が必要になります.refプロパティを任意の要素に追加できます.これにより、コンポーネントがサポートするインスタンスを参照できます.コンポーネントの関数を呼び出したり、アクセスしたりする場合は、コンポーネントがサポートするインスタンスを参照できます.
最下位のDOMノード、それはとても役に立ちます.この文章でrefに関する知識をもっと勉強します.
三.ライフサイクル
Reactでは、コンポーネントのライフサイクルには、初期フェーズ、更新フェーズ、破棄フェーズの3つのフェーズがあります.
初期フェーズ:コンポーネントがDOMに挿入されます
更新フェーズ:DOMを更新する必要がある場合は、コンポーネントを再レンダリングします.
破棄フェーズ:DOMからコンポーネントを除去する
この3つの段階でreactはいくつかのフック関数を提供した.総じて言えば、WillメソッドとDidメソッドです.Willメソッドはイベントが発生する前に実行され、Didメソッドはイベントが発生した後に実行されます.
1.初期化フェーズ
(1)
getInitialState()
.この関数は、コンポーネントがマウントされる前に呼び出され、ステータスを設定する必要があるコンポーネントに対して実行され、コンポーネントの初期ステータスを返します.(2)
componentWillMount()。 ,
(3)
componentDidMount()
.この関数は、コンポーネントがマウントされた直後に呼び出されます.このメソッドを呼び出すと、コンポーネントはページにレンダリングされ、この関数でDOMノードを変更することができます.2.更新フェーズ
(1)
componentWillReceiveProps(object nextProps)
.マウントされたコンポーネントが新しいプロパティを受け入れると呼び出され、この関数はオブジェクトタイプのパラメータを受け入れることができ、このパラメータは受け入れられた新しいプロパティを表し、この新しいプロパティを変更
(2)
shouldComponentUpdate(object nextProps, object nextState)
.このメソッドはブール値を返します.この関数では、開発者はDOMが更新するかどうかを決定することができます.falseを返すと、更新を阻止することを示します.このフェーズの後続のフック関数も呼び出されません
(3)
componentWillUpdate(object nextProps, object nextState)
.このメソッドは更新が発生する前にすぐに呼び出され、この関数ではコンポーネントの状態を変更できません.(4)
componentDidUpdate(object prevProps, object prevState)
.このメソッドは、更新が発生した直後に呼び出されます.更新前のプロパティと更新前のプロパティを表す2つのオブジェクトタイプのパラメータを受け入れます.≪ステータス|Status|emdw≫
3.破棄フェーズ
componentWillUnmount()
.コンポーネントがアンインストールされる前に呼び出されます.コンポーネントのクリーンアップ操作(タイマーのクリア、イベントのリスニングなど)はサブバーで行うべきです.転載先:https://www.cnblogs.com/QxQstar/p/5895350.html