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

推薦する

2つのVirtualBox仮想ネットワークをブリッジするLinuxブリッジメソッドの手順

この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

すべてまたは逆の選択機能を実現するJavaScript

この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

エレメントアバターアップロード練習

この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...

axiosリクエストをvueでカプセル化する方法

実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...

VMware Workstation Pro が Win10 アップデートにより開けなくなる問題の解決方法

今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...

JavaScript オブジェクトを比較する 4 つの方法

目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...

Photoshop を使って Web ワイヤーフレームを作成する方法

この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...

MySQLデータベースの使用仕様の概要

導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...

MySQLのジョイントクエリについて詳しく説明します

目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....