TIL 14|ライフサイクル

TIL

私が整理しなければならないものが多すぎます.

ライフサイクルは

コンポーネントがレンダリングの準備をしている時点から、ページから消えるまでのライフサイクルです.
ページに入ると[レンダリング](Render)
データが変化した場合の再表示
構成部品の作成、更新、および消去.
更新の場合は4種類あります.

道具変換時

状態遷移時

親構成部品の更新時(=再レンダリング時)

強制更新

(forceUpdate())

ページまたは構成部品の移動が消えたときに削除されます.

私の理解通りに説明すれば、
DOMが持続的に現れる過程で、DOMはツリー型構造であり、データがユーザーによって修正されると、すぐに反映されるまでに時間がかかる可能性があり、ユーザーがスムーズで不便を感じないため、仮想DOMを通じてユーザーをインタラクティブにし、後で更新することができる.このとき生成される仮想DOMが誕生から消滅するまでの過程をライフサイクルと呼ぶ.
私はそう理解していますが、殴られるのではないでしょうか...

ライフサイクル関数

ライフサイクル関数はクラス構成部品でのみ使用できます.
大部分の内容は正式な書類で確認でき、説明は理解した内容だけを書く.
私の知っている限りでは、
デフォルトでは、構成部品の作成と損失に伴ってライフサイクル関数が使用されます.必要に応じてライフサイクル関数をロードして、必要なコマンドを提供し、データを管理できます.
ほど

constructor()

コンストラクタ

初回コール

受信

props、デフォルトステータス

は、最初にクラスエレメントのタッチ設定

である.

render()

要素の形状

を定義する.

のステータスとpropsにアクセスして、データ

を表示できます.

に戻ってUI要素を返します!

レンダリング時にstateとprops

を変更できません.

componentDidMount()

コンポーネントをインストールして画面に表示
(DidMountのインストールが完了しました.)

renderは、1回目のrenderが現れると直ちに

にロードされる.

再表示後

をロードしない

内部でAjax要求、登録イベントまたは処理関数呼び出しを発行する

仮想DOMが実際のDOMにアップグレードされました
👉 DOM要素にアクセスするのもいいですね.
👉 divに触れることもできます.

componentDidUpdate()

stateを変更すると、(setState)が再表示され、実行されます.

今私が持っている状態で、道具のほかに、以前の価格も見ることができます.
👉 比較データが必要なときに呼び出して処理してもいいですよ.
👉 DidUpdate()以降も仮想DOM以降であるため、DOM関連処理を行うことができる.

componentWillUnmount()

要素削除時に実行する関数

DOMのすべてのイベントをクリア
👉 条件付きレンダリングによるライフサイクルの削除(?)

const [is_show, setIsShow] = React.useState(true);
<div>
	{is_show? (<LifecycleEX/>):null}
	<button onClick={() => {setIsShow(false)}}> 없어져라!!<button/>
</div>
// 이런걸 설명해 주셨는데 나중에 알게된다고 하셨음