反応のライフサイクルを表示

2262 ワード
React テキストリンク
  • 出現時(Mount)
  • 更新時(更新)
  • 消失時(Unmount)

    • Mounting


    1. constructor

  • ジェネレータ関数です.作成した構成部品がブラウザに初めて表示されたとき
    最初に実行された関数
    • 初期設定
  • 素子が持つべき初期状態値
    • .
  • は、構成部品を作成する前に行うべき作業
    • を処理する.

    2. getDerivedStateProps

  • props、受信した値をステータスと同期するために使用します!
    インストールおよび更新中に
    • を実行できます.

    3. render

  • は、どのDOMが作成されるか、および内部ラベルにどの値が伝達されるかを定義する

    4. componentDidMount

  • 私たちが作成したコンポーネントがブラウザに表示された時点!どんな仕事をするかを示す場所!
  • 週に外部ライブラリを使用する場合は、特定のDOMに描画!?このようなコード.
    編集可能
  • または外部APIにAJAXリクエストを送信する必要がある場合は、主にここで処理します!
  • 要素が表示され、数秒後に何をしたいか、ドメイン内でスクロールイベントを読みたいか!
    これを使いましょう.
  • 特定イベント
    • をリスニングすることもできる.

    Updating


    1. shouldComponentUpdate

  • 仮想DOMも
    • をレンダリングするかどうかを決定します.
  • は、更新コンポーネントのパフォーマンスを最適化するために使用されます.
  • のステータスが変更されると、仮想ドメイン名はまず画面を描画し、他の部分だけを検索してブラウザに反映されます.
    でもまずは画面を描く段階を経ずに最適化したい!
  • ブール値を返すことができます
    true:renderプロシージャ
    false:このまま止まれ!レンダーを停止し、
    • を画面に表示しない

    2. getSnapeshotBeforeUpdate

  • レンダリング後、レンダリング結果がブラウザに反映される前に
    • を呼び出す.
  • のスクロール位置は、予め対応するdomサイズを得ることが望ましい場合、
    • である.

    3. componentDidUpdate


    上記の
  • の動作が完了し、構成部品が更新すると、
    • が呼び出される.
  • 以前の状態と現在の状態を比較して、何をするかを決定します.

    Unmounting

  • コンポーネントDidMountが提供するイベントを削除できます!

    • userEffectを使用してクラス構成部品を模倣する


    ComponentDidMount、ComponentDidMount、ComponentWillUnmountのほかに、何か真似できる方法はありますか?

    shouldComponentUpdateの真似


    関数要素を再作用します.memoパッケージを使用してpropsを比較できます.
    const Button = React.memo((props) => {
  // 당신의 컴포넌트
});
    React.memoはPureComponentとと同じですが、propsのみを比較します.
    (2番目の引数を追加して、古いpropsと新しいpropsを受信するデータム比較関数要素を指定することもできます.trueを返すと、更新をスキップします.)
    React.memoは、比較する単一のステータスオブジェクトがないため、ステータスを比較しません.ただし、子供を単純にすることも、userMemoを使用して子供を最適化することもできます.
    PureComponentとは?
    現在のstate、props、置換state、propsを比較することで、更新するかどうかを決定します.
    ソース:https://ko.reactjs.org/docs/hooks-faq.html
    caffeの使用中に遭遇したいくつかの穴
    BOJ|1330号