Reactの原理の説明

Reactの原理の説明

1. setState() の説明

1.1 データの更新

setState()はデータを非同期的に更新するために使用されます

setState() を複数回呼び出すことができますが、再レンダリングは 1 回だけトリガーされます。

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
クラスOppはReact.Componentを拡張します{
	状態 = {
		カウント: 1,
	}
	ハンドルクリック = () => {
		// データを非同期に更新する this.setState({
			カウント: this.state.count + 1,
		})
        this.setState({
			カウント: this.state.count + 1,
		})
		console.log(this.state.count) // 1
	}
	与える() {
		戻る (
			<div>
				<h1>カウンター: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.2 推奨構文

setState((state, props)=>{})構文を使用する

state: 最新の状態を表します。props: 最新の props を表します。

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
クラスOppはReact.Componentを拡張します{
	状態 = {
		カウント: 1,
	}
	ハンドルクリック = () => {
		/* // データを非同期に更新する this.setState({
			カウント: this.state.count + 1,
		})
		console.log(this.state.count) //1
    this.setState({
			カウント: this.state.count + 1,
		})
		console.log(this.state.count) //1
    */
		// 推奨構文 this.setState((state, props) => {
			戻る {
				カウント: 状態.count + 1,
			}
		})
		this.setState((状態、プロパティ) => {
			console.log('2回目の呼び出し:', state) //2
			戻る {
				カウント: 状態.count + 1,
			}
		})
		console.log(this.state.count) // 3
	}
	与える() {
		戻る (
			<div>
				<h1>カウンター: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.3 2番目のパラメータ

  • 状態が更新された直後にアクションを実行する(ページの再レンダリングが完了した後)
  • 構文: setState(updater[,callback])

コールバックはコールバック関数を指し、追加することも、追加しないこともできます。

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
クラスOppはReact.Componentを拡張します{
	状態 = {
		カウント: 1,
	}
	ハンドルクリック = () => {
		this.setState() は、
			(状態、プロパティ) => {
				戻る {
					カウント: 状態.count + 1,
				}
			},
			// 状態が更新されて再レンダリングされた直後に実行します () => {
				console.log('ステータスの更新が完了しました:', this.state.count) // 2
				console.log(document.getElementById('title').innerText) // カウンター: 2
				document.title = '更新されたカウントは:' + this.state.count
			}
		)
		console.log(this.state.count) //1
	}
	与える() {
		戻る (
			<div>
				<h1 id='title'>カウンター: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

2. JSX構文変換プロセス

  • JSX は、createElement() メソッドの単なる構文糖衣 (簡略化された構文) です。
  • JSX構文は@babel/preset-reactプラグインによってcreateElement()メソッドにコンパイルされます。
  • React要素: 画面に表示したいものを記述するオブジェクトです

ここに画像の説明を挿入

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
//JSX 構文の変換プロセス// const 要素 = <h1 className='greeting'>Hello JSX</h1>
定数要素 = React.createElement(
	'h1',
	{
		クラス名: 'greeting',
	},
	「こんにちは JSX」
)
console.log(要素)
ReactDOM.render(要素、document.getElementById('root'))

3. コンポーネント更新メカニズム

  • setState() の 2 つの機能: 1. 状態の変更 2. コンポーネント (UI) の更新
  • プロセス: 親コンポーネントが再レンダリングされると、子コンポーネントも再レンダリングされますが、現在のコンポーネントサブツリー (現在のコンポーネントとそのすべての子コンポーネント) のみがレンダリングされます。

ここに画像の説明を挿入

4. コンポーネントのパフォーマンス最適化

4.1 状態の縮小

  • 状態を削減: コンポーネントのレンダリングに関連するデータのみを保存します (カウント/リスト データ/読み込みなど)
  • 注意: レンダリングする必要のないブック (タイマー ID など) を状態に置かないでください。
  • 複数の方法で使用する必要のあるデータは、ここに置く必要があります

4.2 不必要な再レンダリングを避ける

  • コンポーネント更新メカニズム: 親コンポーネントが更新されると、子コンポーネントも更新されます。
  • 問題: 子コンポーネントは変更されていない場合でも再レンダリングされ、不要な再レンダリングが発生する
  • 解決策: フック関数 shouldComponentUpdate(nextProps, nextState) を使用する
  • 機能: trueを返すことでコンポーネントを再レンダリングするかどうかを決定します。falseは再レンダリングしないことを意味します。
  • トリガー時間: コンポーネントが再レンダリングされる前に実行される更新フェーズのフック関数 (shouldComponentUpdate -> render)
'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
クラスOppはReact.Componentを拡張します{
	状態 = {
		カウント: 0,
	}
	ハンドルクリック = () => {
		this.setState((状態) => {
			戻る {
				カウント: this.state.count + 1,
			}
		})
	}
	//フック関数 shouldComponentUpdate(nextProps, nextState) {
		// コンポーネントが再レンダリングされないように false を返します // false を返します
		// 最新の状態 console.log('latest state', nextState)
		// 更新前のステータス console.log(this.state)
		// trueを返すと、コンポーネントは再レンダリングされます。trueを返します。
	}
	与える() {
		console.log('コンポーネントが更新されました')
		戻る (
			<div>
				<h1>カウンター: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

例: 乱数

nextState経由

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
// 乱数を生成する class Opp extends React.Component {
	状態 = {
		番号: 0,
	}
	ハンドルクリック = () => {
		this.setState((状態) => {
			戻る {
				数値: Math.floor(Math.random() * 3)、
			}
		})
	}
	// 2回生成された乱数は同じになる可能性があるため、再レンダリングする必要はありません。shouldComponentUpdate(nextState) {
		console.log('最新の状態:', nextState, '現在の状態:', this.state)
		nextState.number !== this.state.number を返します
		/* if ( nextState.number !== this.state.number) {
			真を返す
		}
		falseを返す*/
	}
	与える() {
		console.log('レンダリング')
		戻る (
			<div>
				<h1>乱数: {this.state.number}</h1>
				<button onClick={this.handleClick}>再生成</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

nextState経由

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
// 乱数を生成する class Opp extends React.Component {
	状態 = {
		番号: 0,
	}
	ハンドルクリック = () => {
		this.setState((状態) => {
			戻る {
				数値: Math.floor(Math.random() * 3)、
			}
		})
	}
	与える() {
		戻る (
			<div>
				<NumberBox number={this.state.number} />
				<button onClick={this.handleClick}>再生成</button>
			</div>
		)
	}
}
クラス NumberBox は React.Component を拡張します {
	コンポーネントを更新する必要があります(次のプロパティ) {
		console.log('最新のプロパティ:', nextProps, '現在のプロパティ:', this.props)
		nextProps.number !== this.props.number を返します
	}
	与える() {
		console.log('サブコンポーネントのレンダリング')
		戻り値 <h1>乱数: {this.props.number}</h1>
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • React Fiberの仕組みの詳細な説明
  • ES6 クラスチェーン継承、インスタンス化、React Super (props) 原則の詳細な説明
  • react-redux における connect の使い方と原理分析の詳細な説明
  • React-router 4 オンデマンドロードの実装と原理の詳細な説明

<<:  MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析

>>:  Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法

推薦する

k8sとDockerの関係についての簡単な説明

最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...

Linux 環境の Apache サーバーでセカンダリドメイン名を設定する方法の詳細な説明

この記事では、Linux 環境の Apache サーバーでセカンダリ ドメイン名を構成する方法につい...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

JavaScript のフラット配列をツリー構造に変換する例

目次バックグラウンドで10,000個のデータが失われた再帰法非再帰的方法要約するバックグラウンドで1...

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

Macにmysql5.7.18をインストールする詳細な手順

1. ツール今必要なツールは2つあります: MySQLサーバー (mysql-5.7.18)、MyS...

MySQLデータファイルの保存場所を表示する方法

次のような疑問が湧くかもしれません。MySQLをローカル (自分のコンピュータ) にインストールした...

MySQLの関連ロックについての簡単な理解

この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...

CentOS 6-7 PHPのyumインストール方法(推奨)

1. 現在インストールされているPHPパッケージを確認するyum list installed |...

mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)

MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...

Nginx Rewrite の使用シナリオとコード例の詳細な説明

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

Linux Bash スクリプトを使用してユーザーを識別する方法の例

多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...