Was sind die Vorteile von Reaktionsfunktionskomponenten gegenüber Klassenkomponenten?

青灯夜游
Freigeben: 2022-03-22 15:11:51
Original
4015 Leute haben es durchsucht

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.

Was sind die Vorteile von Reaktionsfunktionskomponenten gegenüber Klassenkomponenten?

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>
	}
Nach dem Login kopieren

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>;
}
Nach dem Login kopieren
Klassenkomponente:

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

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>
	}
}
Nach dem Login kopieren
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>);
};
Nach dem Login kopieren

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>;
};
Nach dem Login kopieren

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>;
};
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage