面接官はReactのライフサイクルについてよく質問します

面接官はReactのライフサイクルについてよく質問します

Reactライフサイクル

Reactのライフサイクルを理解するのに役立つ2つの図

React ライフサイクル (旧)

ここに画像の説明を挿入

クラスLifeはReact.Componentを拡張します{
      // コンストラクタ コンストラクタ(props){
        console.log('ライフコンストラクタ---コンストラクタ');
        スーパー(小道具)
        this.state={num:0}
      }
      // +1 を計算する function add=()=>{
        定数{num} = this.state
        this.setState({num:num+1})
      }
      // コンポーネントを削除する death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      力=()=>{
        this.forceUpdate()
      }
      // マウントしますcomponentWillMount(){
        console.log('Life がマウントされます --- componentWillMount');
      }
      // すでにマウントされているcomponentDidMount(){
        console.log('ライフがマウントされました --- componentDidMount');
      }
      // トリガーを削除するcomponentWillUnmount(){
        console.log('ライフ削除トリガー --- componentWillUnmount');
      }
      // データを変更する必要がありますか? shouldComponentUpdate(){
        console.log('ライフはデータを変更しますか --- shouldComponentUpdate');
        真を返す
      }
      // データが変更されますcomponentWillUpdate(){
        console.log('ライフはデータを変更しようとしています---componentWillUpdate');
      }
      //データコンポーネントDidUpdate()を変更する{
        console.log('ライフ変更データ---componentDidUpdate');
      }
      与える(){
        console.log('Life---レンダリング');
        定数{num} = this.state
        戻る(
          <div>
          <h1>カウンター: {num}</h1> 
          <button onClick={this.add}>クリックして +1</button> 
          <button onClick={this.death}>削除</button> 
          <button onClick={this.force}>データの状態を変更せず、強制的に更新します</button> 
          </div>
        )
      }
    }
    // ページをレンダリングする ReactDOM.render(<Life />, document.getElementById('text'))

取り付け手順

ここに画像の説明を挿入

更新手順

ここに画像の説明を挿入

消去

ここに画像の説明を挿入

概要: 初期化フェーズ: ReactDOM.render() によって開始される - 初期レンダリング
1. constructor() ---構造器
2. componentWillMount() ---將要掛載
3. render() ---render
4. componentDidMount() ---掛載時: コンポーネント内の this.setSate() または親コンポーネントの再レンダリングによってトリガーされます。
1. shouldComponentUpdate() ---是否要進行更改數據
2. componentWillUpdate() ---將要更新數據
3. render()
4. componentDidUpdate() ---更新數據、コンポーネントをアンインストールします。ReactDOM.unmountComponentAtNode() によってトリガーされます。
componentWillUnmount() ---卸載

React ライフサイクル (新規)

画像の説明を追加してください

ライフサイクルの 3 つのフェーズ (新規)

初期化フェーズ: ReactDOM.render() によってトリガーされる - 初期レンダリング
1. コンストラクタ()
2. getDerivedStateFromProps
3. レンダリング()
4. componentDidMount() 更新フェーズ: コンポーネント内の this.setSate() または親コンポーネントの再レンダリングによってトリガーされます。
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. レンダリング()
4. スナップショットを取得する
5. componentDidUpdate() はコンポーネントをアンインストールします。ReactDOM.unmountComponentAtNode() によってトリガーされます。
1. コンポーネントのマウントを解除します。

重要なフック

1.render: レンダリングを初期化するか、レンダリング呼び出しを更新する
2.componentDidMount: 監視を有効にし、Ajaxリクエストを送信する
3.componentWillUnmount: タイマーのクリーンアップなどの仕上げ作業を行います。

捨てられるフック

1.コンポーネントマウント
2.コンポーネントがプロパティを受け取る
3.コンポーネントの更新

現在使用會出現警告,下一個大版本需要加上UNSAFE_前綴才能使用,以后可能會被徹底廢棄,不建議使用。

面接官がよく聞くReactライフサイクルの質問についての記事はこれで終わりです。Reactライフサイクルに関するその他のコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Reactコンポーネントのライフサイクル機能についての簡単な説明
  • Reactの新バージョンのライフサイクルフック機能と使用方法の詳細な説明
  • React Stateの状態とライフサイクルの実装方法
  • Reactコンポーネントのライフサイクルの例
  • Reactライフサイクル例の分析
  • React ライフサイクルの原則と使用上の注意
  • Vue ライフサイクルと React ライフサイクルの比較 [推奨]
  • React Nativeのコンポーネントのライフサイクルについての簡単な説明
  • Reactコンポーネントのライフサイクルの詳細な説明
  • 一般的な js-react コンポーネントのライフサイクル

<<:  Java を Mysql バージョン 8.0.18 に接続する方法の詳細な説明

>>:  Linux システムのユーザー管理コマンドの概要

推薦する

MySQL (8 および 5.7) の Docker インストール

この記事では、Dockerを使用してMySQLデータベースとリモートアクセス構成をデプロイする方法を...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?

序文基本的なデータ構造として、配列とオブジェクトはさまざまなプログラミング言語で重要な役割を果たしま...

Vue.js ソースコード解析のカスタム手順の詳細な説明

序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...

vue+tsは要素のマウスドラッグの効果を実現します

この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...

テーブルタグ(TAGS)の詳細な紹介

テーブルの基本構文<table>...</table> - テーブルを定義し...

異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...

MySQLにおける区切り文字の定義と機能の詳細な説明

MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...

MySQL コード実行構造例の分析 [シーケンス、分岐、ループ構造]

この記事では、例を使用して MySQL コード実行構造について説明します。ご参考までに、詳細は以下の...

Ubuntu の空き容量を増やす 5 つの簡単な方法

序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...

ウェブページを作成する際に注意すべき点

--ホームページのバックアップ1.txtテキスト2. 画像をスキャンする3. PSDデザイン原画(A...

Dockerfileを使用してApacheイメージを作成する方法

目次1. Dockerイメージ2. 既存のイメージに基づいてインスタンスを作成する3. ローカルテン...

MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...

MySQLスタートアップが起こした事故の実録

目次背景MySQLが完全に起動したかどうかを確認する方法事故最初の変更2回目の改訂要約するMySQL...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...