State Lifting in React

Oft müssen mehrere Komponenten die gleichen sich ändernden Daten widerspiegeln. In React wird empfohlen, den gemeinsamen Zustand zum nächsten gemeinsamen Vorfahren hochzuheben. Schauen wir uns ein Beispiel an.

Nehmen wir an, wir wollen einen Rechner für die Wassertemperatur erstellen. Er besteht aus einem Eingabefeld, in das der Benutzer die Temperatur eingibt, und einem Absatz, in dem das Urteil ausgegeben wird: Wasser ist flüssig, Wasser ist fest, Wasser ist gasförmig.

Nehmen wir an, unser Rechner ist eine Container-Komponente Calculator:

function Calculator() {
	return <div>
		
	</div>;
}

Lassen Sie uns das Eingabefeld für die Temperatur in die Komponente TempInp auslagern und den Absatz mit dem Urteil in die Komponente Verdict:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

Es ist leicht zu verstehen, dass sowohl TempInp als auch Verdict einen Zustand mit der Temperatur haben müssen. Gleichzeitig ist es logisch, dass es sich um dieselbe Temperatur handeln sollte: Während Daten in das Eingabefeld eingegeben werden, sollte das Urteil angezeigt werden.

In einem solchen Fall wird die Verwendung einer Technik empfohlen, die als State Lifting (Hochheben des Zustands) bezeichnet wird: Der Zustand, der für zwei (oder mehr) Komponenten gemeinsam ist, wird bis zu ihrem gemeinsamen Elternteil nach oben gezogen.

In unserem Fall wird sich herausstellen, dass der Zustand mit der Temperatur der Komponente Calculator gehören sollte, der ihn als Props an TempInp und Verdict weitergibt:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

In der Komponente TempInp sollte ein Eingabefeld zur Änderung der Temperatur vorhanden sein. Da diese Temperatur jedoch ein Prop dieser Komponente ist, kann sie in TempInp nicht direkt geändert werden. Es wäre richtig, eine spezielle Funktion zur Änderung der Temperatur aus der Komponente Calculator zu übergeben:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

Man kann übrigens auch keine neue Funktion einführen, sondern die Funktion setTemp an die Kindkomponente übergeben:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

Schreiben Sie die Implementierung der Komponenten TempInp und Verdict.

Denken Sie sich 3 Aufgaben aus, bei denen State Lifting verwendet werden muss. Schreiben Sie die Lösungen für diese Aufgaben.