面接官は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 システムのユーザー管理コマンドの概要

推薦する

Linux システム (CentOS7 インストール) に JDK8 をインストールするための詳細なチュートリアル

JDKのインストールシステムのインストールについてはあまり詳しく説明しません。インストール手順はオン...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

Mysql varchar型の合計操作例

友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...

yum から docker インストール パッケージをダウンロードし、オフライン マシンにインストールする例の詳細なコード

1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...

事例を通してLinux NFSの仕組みを詳細に分析

前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

HTML 選択オプションの基本的な理解と使用

JavaScript での HTML (選択オプション) の詳細な説明1. 基本的な理解:コードをコ...

HTML ウェブページにおけるさまざまなフォント形式の詳細

このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォン...

MySQL の従来のソート、カスタム ソート、中国語のピンイン文字によるソート

MySQL の通常のソート、カスタム ソート、中国語のピンイン文字によるソート。実際の SQL を記...

ネイティブJSが様々なスポーツの均一な動きを実現

この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...

MySQL 8の新機能におけるグローバルパラメータの永続性の詳細な説明

目次序文グローバルパラメータの永続性最後に要約する参考資料:序文2018 年に MySQL 8.0....

入力[type=file]の起動が遅くて動かなくなる問題を素早く解決します

入力タグタイプがファイルで、タグ内にaccpet="image/*"属性が設定さ...

MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション

問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...

背景画像にテキストを表示するためのCSS

効果: <div class="imgs"> <!-- 背景画...