Reactの原理の説明

'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'))

'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'))

'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'))

'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'))

'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'))

'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'))

'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'))