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 に接続する方法の詳細な説明
この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...
この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...
この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...
目次DockerのインストールNvidia-docker のインストールDockerのインストール1...
1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...
目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...
inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...
この記事は、Element公式サイトとQiniu Cloud公式サイトを使用しています。 eleme...
インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...
実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...
この投稿では、通知、画像とビデオ、フォーム フィールド、タイトル、段落、箇条書きリスト、ナビゲーショ...
導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...
目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....