Heim >Web-Frontend >js-Tutorial >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 zugreifenKann 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-Komponentevar 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 initialisiertprops-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:
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:
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!