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

推薦する

Windows での MySQL スケジュールバックアップ スクリプトの実装

Windows サーバーでデータベース データを定期的にバックアップする場合は、Windows タス...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...

ファイアウォールの iptables 戦略を使用して Linux サーバー上のポートを転送する方法

2つの異なるサーバー間の転送ポート転送を有効にするまず、デフォルトでは無効になっている IP 転送機...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

Linux または Windows 環境での pytorch のインストールと検証 (runtimeerror 問題の解決)

1. pytorch公式サイトから対応するインストールファイルをダウンロードします。 https:...

スクロールバーがスペースを占有することで発生するバグを修正しました

背景このバグは滾動條占據空間ことで発生していました。いくつかの情報を確認して、ようやく解決しました。...

WeChatアプレットで計算機機能を実装する

この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください...

MySQL 8.0.24 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...

CSSにおけるマージン値と垂直マージンの重なりについて

平行ボックスの余白 (二重余白の重なり) に関する面接の質問: 1 つのボックスに上余白があり、もう...

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

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

初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...

Linuxの貼り付けコマンドの使い方

01. コマンドの概要貼り付けコマンドは各ファイルを列ごとに結合します。これは、2 つの異なるファイ...