Welche drei Möglichkeiten gibt es, Komponenten in React zu erstellen?

Einführung in die drei Möglichkeiten zum Erstellen von Komponenten in React und ihre Gemeinsamkeiten und Unterschiede:

1. Funktionskomponenten

(Empfohlenes Tutorial: React-Tutorial1. Syntax

function myConponent(props) {
	return `Hello${props.name}`
}

2. Funktionen

Sie können auf der offiziellen Website mehr über die neue Hooks-API erfahren. Früher war sie eine zustandslose Komponente, aber jetzt kann sie zustandsorientiert sein.

Die Komponente kann nicht auf dieses Objekt zugreifen.

Auf die Lebenszyklusmethode kann nicht zugegriffen werden.

3. Vorschlag:

Versuchen Sie nach Möglichkeit, zustandslose Komponenten zu verwenden und sie einfach und zustandslos zu halten. [Was der Autor meint, ist, zu versuchen, übergeordnete Komponenten zur Steuerung untergeordneter Komponenten zu verwenden, untergeordnete Komponenten werden für die Anzeige verwendet und übergeordnete Komponenten sind für die Logik verantwortlich]

2. es5-Wege-React.createClass-Komponente

1 Syntax

var myCreate = React.createClass({
	defaultProps: {
		//code
	},
	getInitialState: function() {
		return { //code };
	},
	render:function(){
		return ( //code );
	}
})

2. Funktionen

Diese Methode ist relativ alt und wird nach und nach eliminiert. 3.

es6-Methodenklasse:

1. Syntax:

class InputControlES6 extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			state_exam: props.exam
		}
		//ES6类中函数必须手动绑定
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange() {
		this.setState({
			state_exam: 'hello world'
		});
	}
	render() {
		return( //code )
	};
}

2. Funktionen:

Member-Funktionen binden dies nicht automatisch Entwickler müssen manuell binden, andernfalls kann das aktuelle Komponenteninstanzobjekt nicht abgerufen werden.

State wird im Konstruktor initialisiert

props-Attributtyp und Komponenten-Standardattribute werden als Attribute der Komponentenklasse und nicht als Attribute der Komponenteninstanz verwendet, sodass die statische Konfiguration der Klasse verwendet wird.

Bitte beachten Sie die Grundprinzipien beim Erstellen von Komponenten:

1 Der erste Buchstabe des Komponentennamens muss groß geschrieben werden

2 Die Komponente darf nur einen Wurzelknoten enthalten (wenn Sie nicht möchten, dass der Wurzelknoten umbrochen wird). Durch eine Bezeichnung können Sie Fragment einführen

3 Versuchen Sie, funktionale Komponenten zu verwenden und sie einfach und zustandslos zu halten

Abschließend vergleichen wir den Unterschied zwischen der Art und Weise, wie Funktionskomponenten und Klassenkomponenten dieselbe Funktion schreiben:

Zustandsvergleich gesteuert durch übergeordnete Komponenten

Funktionskomponenten:

function App(props) {
	function handleClick() {
		props.dispatch({ type: 'app/create' });
	}
	return <div onClick={handleClick}>{props.name}</div>
}

Klassenkomponente

class App extends React.Component {
	handleClick() {
		this.props.dispatch({ type: 'app/create' });
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.props.name}</div>
	}
}

Vergleich des Selbstwartungsstatus

import React, { useState } from 'react';
function App(props) {
	const [count, setCount] = useState(0);
	function handleClick() {
		setCount(count + 1);
	}
	return <div onClick={handleClick}>{count}</div>
}

Klassenkomponente:

class App extends React.Component {
	state = { count: 0 }
	handleClick() {
		this.setState({ count: this.state.count +1 })
	}
	render() {
		return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>
	}
}

Das obige ist der detaillierte Inhalt vonWelche drei Möglichkeiten gibt es, Komponenten in React zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!