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のインストールおよび使用方法

推薦する

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

Nginx で Brotli 圧縮アルゴリズムを有効にする方法の例

Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...

MySQL 5.7 のインストールと設定方法のグラフィックチュートリアル

このチュートリアルでは、MySQL 5.7のインストールと設定方法を参考までに紹介します。具体的な内...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

Navicatを使ってMySQLを操作する方法

目次序文: 1. Navicatの紹介2. シンプルなチュートリアルの共有接続管理ライブラリテーブル...

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法 背景: linear-gradient(direction,color-stop1,color...

VUE+Canvasは、インゴットを受け取る富の神のゲームを実装します

前回のキャンバス ゲーム シリーズへようこそ: 《VUEがFlappy Birdを実装しました〜〜〜...

jQueryはシンプルなカルーセル効果を実装します

みなさんこんにちは。今日はカルーセルの実装についてお話しします。私が作成したカルーセルの効果は次のと...

MySQL8 ベースの docker-compose デプロイメント プロジェクトの実装

1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

目次前面に書かれた予防開発環境構築開発構成に関する注意事項前面に書かれたuni-app は、Vue....

HTMLのマーキータグは、シームレスなスクロールマーキー効果を実現します。

<marquee> タグはペアで表示されるタグです。最初のタグ <marquee...

CSSのclip-pathプロパティを使用して不規則なグラフィックを表示する

clip-path CSS プロパティはクリッピングを使用して要素の表示可能領域を作成します。領域内...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...