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

推薦する

Nginx のアクセス制御とパラメータ調整方法

Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...

MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)

目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...

html+cssレイアウトの3つの方法(ナチュラルレイアウト/フローレイアウト/ポジショニングレイアウト)

1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....

Linux でのファイルの編集、保存、終了の実践的な説明

Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...

Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...

Unix/Linuxフォークの隠れたオーバーヘッド

目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...

よくあるNginxの設定ミスの例

目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...

Linux で MySQL スケジュール タスク バックアップ データを実装する方法

序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...

Gojs がアリのラインアニメーション効果を実装

目次1. Gojsの実装1. 描画2. 破線の実装3. 点線を動かす2. 点線と点線アニメーションの...

VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル

1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...

MySQLスローログクエリの詳細な説明

遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...