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

出現時(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