リアクション仮想ドーム

ダミードーム
:仮想ドームをメモリに配置し、以前と後の仮想ドームを比較し、実際のドームに変更された部分のみを反映します.
:実際のドームを作成できる反応要素ツリー
そしはんのうげんそ

//jsx
function Title({ title, color }) {
	return <style ={{ color}}> {titlee} </p>
}
const element = <Title title ="안녕하세여" color = "blue" />
cosole.log(element);

// 리액트 요소
const consoleLogResult = {
	type: Title,
	props: {title: '안녕하세요', color: 'blue' },
};

->反応要素は不変のオブジェクトで、変更しようとするとエラーが発生します

構成部品の追加:mount

削除

構成部品:アンインストール

✔¥АААААААААААА
=>条件付きレンダリングでも同様の効果が得られます.
✔1つの反応元素の木はスクリーンの上で時間の変化の1つの瞬間を表します
データ変更による画面の更新

レンダリング手順->実際のドームへの変更(仮想ドームを使用)

を理解する
コミットステップ

->決定された変更を実際のドーム(実際のドームを使用)

に反映する
📍 実行するjsxコード

function Todo({ title, desc }) {
	const [priority, setPriority] = useState("high");
	function onClick() {
		setPriority(priority === 'high' ? 'low' : 'high');
	}
	return (
		<div>
			<Title title={title}/>
			<p>{desc}</p>
			<p>{priority === 'high' ? "우선순위 높음" : "우선순위 낮음"}</p>
		</div>
	);
}

const Title = React.memp(({title}) => {
	return <p style={{color: 'blue' }}>{title}</p>;
});

ReactDom.render(
	<Todo title="리액트 공부하기" desc="실전 리액트 프로그래밍을 공부한다" />,
	document.getElementById('root');
);

📍 Todo素子から作成された反応元素

const intialElementTree = {
	type: Todo,
	props: {
		title: "리액트 공부하기",
		desc: "실전 리액트 프로그래밍을 공부한다",
	},
	...
};

📍 Todo構成部品関数のレンダリング結果

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: Title,
				props: { title: '리액트 공부하기' },
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 높음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};

→Title素子が存在するため、この反応元素ツリーを実際のドームとして作成できない
АААААААААААААА
📍 Title構成部品関数のレンダリング結果

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: 'p',
				props: { 
					style: { color: 'blue' },
					children: '리액트 공부하기',
				},
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 높음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};

→実ドームが作れる
✔レンダリングフェーズ:最初の反応要素ツリーから仮想ドームを作成し、以前の仮想ドームと比較して、実際のドームに反映する内容を決定するフェーズ
ステータス値変更関数によるレンダリング手順

ボタンをクリックして優先度ステータス値を変更→レンダリングステップ

を開始

Todo構成部品の優先度状態値が変更すると、Todo構成部品関数

が呼び出される.

反応要素ツリーレンダリング結果

を再使用

変更部分のみ

更新
📍 Todo構成部品関数のレンダリング結果

const elementTree = {
	type: "div",
	props: {
		children: [
			{
				type: Title,
				props: { title: '리액트 공부하기' },
				//...
			},
			{
				type: 'p',
				props: { children: '실전 리액트 프로그래밍을 공부한다' },
				//...
			},
			{
				type: 'p',
				props: { children: '우선순위 낮음' },
				//...
			},
			{
				type: 'button',
				props: {
					onClick: function () {
						/* Todo 컴포넌트의 onClick함수 */
					}
					children: '우선순위 변경',
				},
				//...
			}
		],
	},
//...
};