ReactライフサイクルReactのライフサイクルを理解するのに役立つ2つの図
クラス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() によって開始される - 初期レンダリング React ライフサイクル (新規) ライフサイクルの 3 つのフェーズ (新規) 初期化フェーズ: ReactDOM.render() によってトリガーされる - 初期レンダリング
1.render: レンダリングを初期化するか、レンダリング呼び出しを更新する
1.コンポーネントマウント
面接官がよく聞くReactライフサイクルの質問についての記事はこれで終わりです。Reactライフサイクルに関するその他のコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Java を Mysql バージョン 8.0.18 に接続する方法の詳細な説明
Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
1. 自然なレイアウト<br />レイアウトは変更せずに自動的に左揃えになります。 2....
Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...
Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...
目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...
目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...
序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...
目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...
目次1. Gojsの実装1. 描画2. 破線の実装3. 点線を動かす2. 点線と点線アニメーションの...
1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...
遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...
display:flex、justify-content: space-betweend を設定する...
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...