1.ライフサイクルとは何かコンポーネントのライフサイクルは、人が生まれ、年を取り、病気になり、死ぬのと同じように、また自然界にも変化があるのと同じように、React の動作プロセスです。Web ページ内のすべてのコンポーネントは、生物と同じように作成、更新、削除されます。 Reactコンポーネントのライフサイクルは3つのプロセスに分けられます
2. 読み込みプロセス次の関数を順番に呼び出します: 1.コンストラクタこれは ES6 のコンストラクターであり、コンポーネント クラスのインスタンスを作成します。このプロセスでは、状態の初期化とメンバー関数の this 環境のバインドという 2 つの手順が必要です。 2. レンダリングレンダリングは、React コンポーネントの中で最も重要な機能です。これは、React で唯一無視できない関数です。レンダリング関数では、親要素は 1 つしか存在できません。 render 関数は純粋な関数です。実際にレンダリング アクションを実行するわけではありません。JSX で記述された構造にすぎません。最終的には、React がレンダリング プロセスを実行します。render 関数では操作は行われません。ページの記述は、this.state と this.props の戻り結果に完全に依存します。render で this.setState を呼び出すことはできません。
3. コンポーネントWillMountとコンポーネントDidMountこれら 2 つの関数は、それぞれレンダリングの前と後に実行されます。このプロセスは通常、ブラウザ側でのみ呼び出すことができるため、ここでは非同期データを取得し、componentDidMount が呼び出されると、コンポーネントが DOM ツリーに読み込まれます。 3. 更新プロセス簡単に言えば、 1. コンポーネントはプロパティを受け取ります(次のプロパティ)props が変更されたときだけ呼び出されるわけではありません。実際、親コンポーネントの render 関数が呼び出される限り、render でレンダリングされる子コンポーネントは更新されます。親コンポーネントから子コンポーネントに渡される props が変更されたかどうかに関係なく、子コンポーネントの componentWillReceiveProps プロセスがトリガーされます。ただし、この関数は新しい props の値に基づいて内部状態を更新するかどうかを計算するのに適しているため、this.setState メソッドのトリガー プロセスはこの関数を呼び出しません。 2. コンポーネントを更新する必要があります(nextProps、nextState)この関数の重要性はレンダリングに次ぐものです。レンダリング関数はレンダリングするものを決定し、shouldComponentUpdate はレンダリングする必要がないものを決定します。どちらも関数を返す必要があります。このプロセスにより、パフォーマンスが向上し、不要な再レンダリング プロセスが無視されます。 3. コンポーネントWillUpdateとコンポーネントDidUpdate読み込みプロセスとは異なり、ここでのcomponentDidUpdateはブラウザ側とサーバー側の両方で実行できます。 4. レンダリングをトリガーするReact では、レンダリングをトリガーするパスが 4 つあります。 以下は、shouldComponentUpdate がデフォルトで true を返すことを前提としています。 (1)初期レンダリング (2) this.setState を呼び出します (すべての setState 呼び出しがレンダリングをトリガーするわけではありません。React は操作をマージして一度にすべてをレンダリングする場合があります)。 (3)親コンポーネントが更新されます(通常はpropsが変更されますが、propsが変更されていない場合や親コンポーネントと子コンポーネント間でデータの交換がない場合でも、レンダリングがトリガーされます)。 (4)this.forceUpdateを呼び出します。 注: shouldComponentUpdate で false を返すと、更新パスを早期に終了できます。 4. アンインストールのプロセス実際に使われることはほとんどありません。ここにはcomponentWillUnmountが1つだけあります。一般的には、componentDidMountに登録されたイベントをここで削除する必要があります。 5. ライフサイクルプロセス1. レンダリングを初期化して初めて表示する: ReactDOM.render()
2. 毎回状態を更新する: this.setState()
3. コンポーネントを削除する: ReactDOM.unmountComponentAtNode(containerDom)
6. 例<div id='コンテナ'></div> <script type="text/babel"> クラスLifeCycleはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); alert("初期レンダリング"); アラート("コンストラクタ"); this.state = {str: "hello"}; } コンポーネントマウント() { アラート("コンポーネントがマウントされます"); } コンポーネントマウント() { アラート("コンポーネントがマウントされました"); } コンポーネントはプロパティを受け取ります(次のプロパティ) { アラート("コンポーネントがプロパティを受け取る"); } コンポーネント更新() { アラート("コンポーネントを更新する必要があります"); return true; // trueを返すことを忘れないでください } コンポーネントWillUpdate() { アラート("コンポーネントが更新されます"); } コンポーネントを更新しました() { アラート("コンポーネントが更新されました"); } コンポーネントのマウントを解除します(){ アラート("コンポーネントがマウント解除されます"); } 状態を設定する() { s = "hello"とします。 (this.state.str === s)の場合{ s = "こんにちは"; } this.setState({ str: s }); } 強制更新() { this.forceUpdate(); } 与える() { アラート("レンダリング"); 戻る( <div> <span>{"プロパティ:"><h2>{parseInt(this.props.num)}</h2></span> <br /> <span>{"州:"><h2>{this.state.str}</h2></span> </div> ); } } クラスコンテナはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); この状態 = { 数値: Math.random() * 100 }; } プロパティの変更(){ this.setState({ 数値: Math.random() * 100 }); } ライフサイクルステートを設定する() { this.refs.rLifeCycle.setTheState(); } 強制ライフサイクル更新() { this.refs.rLifeCycle.forceItUpdate(); } アンマウントライフサイクル() { // ここで親コンポーネントをアンマウントすると、子コンポーネントもアンマウントされます ReactDOM.unmountComponentAtNode(document.getElementById("container")); } 親強制更新() { this.forceUpdate(); } 与える() { 戻る ( <div> <a href="javascript:;" onClick={this.propsChange.bind(this)}>propsChange</a> <a href="javascript:;" onClick={this.setLifeCycleState.bind(this)}>状態の設定</a> <a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>強制更新</a> <a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>アンマウント</a> <a href="javascript:;" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a> <ライフサイクル ref="rLifeCycle" num={this.state.num}></ライフサイクル> </div> ); } } ReactDOM.render() は、 <コンテナ></コンテナ>, document.getElementById('コンテナ') ); </スクリプト> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: DockerがElasticsearch7.xを起動してエラーを報告する問題を解決する
>>: Markodwnによるタイトル配置による同期スクロールのアイデアの詳細な説明
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
1. TCP ラッパーの概要TCP Wrappers は TCP サービス プログラムを「ラップ」し...
Docker入門Docker はオープンソースのアプリケーション コンテナ エンジンです。従来の仮...
目次1. この Web サイトには SQL インジェクションの脆弱性がある可能性があることが判明しま...
目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....
MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...
仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...
Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...
今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...
バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...
目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...
mysql ログインのコマンド形式は次のとおりです。 mysql -h [hostip] -u [ユ...
noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...