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

Die folgenden drei Arten und Eigenschaften von Reaktionskomponenten können hoffentlich für alle hilfreich sein.

1. Funktionskomponenten:

(1) Syntax:

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

(2) Funktionen:

Früher waren es zustandslose Komponenten, aber jetzt kann es zustandsbehaftet sein

Komponenten können nicht auf dieses Objekt zugreifen

Kann nicht auf Lebenszyklusmethoden zugreifen

(3) Empfehlung:

Versuchen Sie nach Möglichkeit, zustandslose Komponenten zu verwenden, um 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-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

(kostenloses Video-Tutorial empfohlen:

Javascript-Video-Tutorial)

3. es6-Methodenklasse:

(1) Grammatik:

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:

Die Mitgliedsfunktion bindet dies nicht automatisch, und Entwickler müssen es manuell binden, da sonst das aktuelle Komponenteninstanzobjekt nicht abgerufen werden kann.

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:

• Der erste Buchstabe des Komponentennamens muss groß geschrieben werden

• Die Komponente darf nur einen Wurzelknoten enthalten (wenn Sie nicht möchten, dass der Wurzelknoten umschlossen wird). Durch ein Etikett können Sie es einführen Fragment, es spielt keine Rolle, wenn Sie nicht wissen, wie man Fragment verwendet Sie können sich die Zusammenfassung des Autors zum Reagieren von Grundkenntnissen (1) in diesem Artikel ansehen)

• Versuchen Sie, es funktional zu verwenden Komponenten und halten Sie sie einfach und zustandslos.

Abschließend vergleichen wir den Unterschied darin, wie die Funktionskomponente und die Klassenkomponente dieselbe Funktion schreiben:

Vergleich des von der übergeordneten Komponente gesteuerten Zustands

Funktionskomponente:

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 Selbst -erhaltener Zustand

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>
	}
}

Verwandte Empfehlungen:

Reaktions-Tutorial

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!