Was sind die Vorteile von Reaktionsfunktionskomponenten gegenüber Klassenkomponenten?

Die Vorteile von React-Funktionskomponenten gegenüber Klassenkomponenten sind: 1. Die Syntax der Funktionskomponenten ist kürzer und einfacher, was das Entwickeln, Verstehen und Testen erleichtert. 2. Funktionskomponenten haben einen geringen Leistungsverbrauch, da dies bei Funktionskomponenten nicht erforderlich ist Erstellen Sie eine Instanz, führen Sie sie beim Rendern aus und zerstören Sie direkt alle Zwischenelemente, nachdem Sie das zurückgegebene Reaktionselement erhalten haben.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

1. Klassenkomponenten

Klassenkomponenten werden, wie der Name schon sagt, in Form von ES6-Klassen geschrieben. Diese Klasse muss React.Component

erben, wenn Sie auf die von der übergeordneten Komponente übergebenen Parameter zugreifen möchten , Es kann über this.props zugegriffen werden

Die Render-Methode muss in der Komponente implementiert werden und das React-Objekt wird wie folgt zurückgegeben:

class Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {
		return <h1>Hello,{this.props.name}</h1>
	}

2. Funktionskomponente

Funktionskomponente, wie folgt Der Name lässt vermuten, dass es durch Funktionen geschrieben wird. Das Implementieren einer React-Komponente in der Form ist die einfachste Möglichkeit, eine Komponente in React zu definieren

Drei. Der Unterschied zwischen den beiden Arten von React-Komponenten ist hauptsächlich in die folgenden Hauptrichtungen unterteilt:

1. Der offensichtlichste Unterschied zwischen den beiden ist die Schreibform . Die Implementierung derselben Funktion kann der Schreibform von Klassenkomponenten bzw. Funktionskomponenten entsprechen:

function Welcome(props) {

	return <h1>Hello,{props.name}</h1>;
}

Klassenkomponente:

function Welcome(props) {   
return <h1>Hello, {props.name}</h1>; 
}

2 ist eine zustandslose Komponente und kann den Status der Komponente nicht speichern. Im Gegensatz zur Klassenkomponente, in der setState aufgerufen wird. Wenn Sie den Status verwalten möchten, können Sie useState wie folgt verwenden:

cass Welcome extends React.Component {
	constructor(props) {
		super(props)
	}

	render() {

		return <h1>Hello,{this.props.name}</h1>
	}
}

Bei Verwendung von Hooks im Allgemeinen, wenn es sich um eine Funktionskomponente handelt Ruft den Status auf, Sie müssen eine Klassenkomponente erstellen oder den Status auf Ihre übergeordnete Komponente aktualisieren und ihn dann durch das Requisitenobjekt weiterleiten

In Funktionskomponenten gibt es keinen Lebenszyklus Diese Lebenszyklus-Hooks stammen von der geerbten React.Component

Wenn also der Lebenszyklus verwendet wird, können nur Klassenkomponenten verwendet werden

Aber Funktionskomponenten können auch useEffect verwenden, um den Ersetzungslebenszyklus abzuschließen:

const FunctionalComponent=()=> {
	const [count,
	setCount]=React.useState(0);

	return (
	<div> 
	<p>count: {count}</p> 
	<button onClick= {()=> setCount(count + 1)}>Click</button> 
	</div>);
};

Das obige einfache Beispiel entspricht dem Lebenszyklus von ComponentDidMount in Klassenkomponenten Wenn es sich um eine Funktionskomponente handelt, besteht der Aufruf darin, die Funktion auszuführen:

const FunctionalComponent=()=> {
	useEffect(()=> {
		console.log("Hello");
	}

	, []);
	return <h1>Hello,World</h1>;
};

Wenn es sich um eine Klassenkomponente handelt, müssen Sie die Komponente instanziieren und dann die Rendermethode des Instanzobjekts aufrufen:

const FunctionalComponent=()=> {
	React.useEffect(()=> {
		return ()=> {
			console.log("Bye");
		};
	}
	, []);
	return <h1>Bye,World</h1>;
};

5 . Holen Sie sich den gerenderten Wert

Geben Sie zunächst ein Beispiel an Die entsprechende Funktionskomponente lautet wie folgt:

// 你的代码  
function SayHi() {
	return <p>Hello,
	React</p>
}

// React内部  
const result = SayHi(props) //  <p>Hello, React</p>

Die entsprechende Klassenkomponente lautet wie folgt:

// 你的代码  
class SayHi extends React.Component {
	render() {
		return <p>Hello,React</p>
	}
}

// React内部  
const instance = new SayHi(props) //  SayHi {}  
const result = instance.render() //  <p>Hello, React</p>

Die beiden scheinen die gleiche Implementierungsfunktion zu haben, aber in der Klasse Komponente, this.props.user ist in React unveränderlich, wird sich also nie ändern, ist aber immer variabel, sodass Sie die neue Version in Render- und Lebenszyklusfunktionen lesen können

Wenn unsere Komponente also aktualisiert wird Die Anfrage wird ausgeführt. this.props wird sich ändern. Die showMessage-Methode liest den Benutzer aus den „neuesten“ Requisiten

Die Funktionskomponente selbst existiert nicht und die Requisiten ändern sich nicht, sodass der Inhalt der Warnung beim gleichen Klick immer noch der vorherige Inhalt ist

Zusammenfassung

Beide Komponenten haben ihre eigenen Vor- und Nachteile

Die Syntax der Funktionskomponenten ist kürzer und einfacher, was das Entwickeln, Verstehen und Testen erleichtert. Klassenkomponenten können aufgrund der starken Nutzung dieser Klasse auch verwirrend sein Der Komponentenverbrauch ist relativ groß, da Klassenkomponenten Instanzen von Klassenkomponenten erstellen müssen und nicht zerstört werden können.

Funktionskomponenten haben einen geringen Leistungsverbrauch, da Funktionskomponenten keine Instanzen erstellen müssen, sie beim Rendern ausgeführt werden und alle Zwischenkomponenten direkt zerstört werden, nachdem sie die zurückgegebenen Reaktionselemente erhalten haben. 【Verwandte Empfehlung:

Redis-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonWas sind die Vorteile von Reaktionsfunktionskomponenten gegenüber Klassenkomponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!