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) 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