React-Prinzipien erklärt

React-Prinzipien erklärt

1. setState() Beschreibung

1.1 Daten aktualisieren

setState() wird verwendet, um Daten asynchron zu aktualisieren

Sie können setState() mehrmals aufrufen und es wird nur einmal ein erneutes Rendering ausgelöst.

React von „react“ importieren
ReactDOM von „react-dom“ importieren
Klasse Opp erweitert React.Component {
	Zustand = {
		Anzahl: 1,
	}
	handleKlick = () => {
		// Daten asynchron aktualisieren this.setState({
			Anzahl: dieser.Zustand.Anzahl + 1,
		})
        dies.setState({
			Anzahl: dieser.Zustand.Anzahl + 1,
		})
		console.log(dieser.Zustand.Anzahl) // 1
	}
	rendern() {
		zurückkehren (
			<div>
				<h1>Zähler: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.2 Empfohlene Syntax

Verwenden Sie die Syntax setState((state, props)=>{})

state: stellt den neuesten Status dar, props: stellt die neuesten Props dar

React von „react“ importieren
ReactDOM von „react-dom“ importieren
Klasse Opp erweitert React.Component {
	Zustand = {
		Anzahl: 1,
	}
	handleKlick = () => {
		/* // Daten asynchron aktualisieren this.setState({
			Anzahl: dieser.Zustand.Anzahl + 1,
		})
		konsole.log(dieser.zustand.anzahl) //1
    dies.setState({
			Anzahl: dieser.Zustand.Anzahl + 1,
		})
		konsole.log(dieser.zustand.anzahl) //1
    */
		// Empfohlene Syntax this.setState((state, props) => {
			zurückkehren {
				Anzahl: Status.Anzahl + 1,
			}
		})
		this.setState((Zustand, Eigenschaften) => {
			console.log('Zweiter Aufruf:', Status) //2
			zurückkehren {
				Anzahl: Status.Anzahl + 1,
			}
		})
		console.log(dieser.Zustand.Anzahl) // 3
	}
	rendern() {
		zurückkehren (
			<div>
				<h1>Zähler: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

1.3 Zweiter Parameter

  • Führen Sie unmittelbar nach der Aktualisierung des Status (die Seite ist neu gerendert) eine Aktion aus.
  • Syntax: setState(updater[,callback])

callback bezieht sich auf die Rückruffunktion, die hinzugefügt werden kann oder nicht

React von „react“ importieren
ReactDOM von „react-dom“ importieren
Klasse Opp erweitert React.Component {
	Zustand = {
		Anzahl: 1,
	}
	handleKlick = () => {
		dies.setState(
			(Zustand, Eigenschaften) => {
				zurückkehren {
					Anzahl: Status.Anzahl + 1,
				}
			},
			// Sofort ausführen, nachdem der Status aktualisiert und neu gerendert wurde () => {
				console.log('Statusaktualisierung abgeschlossen:', this.state.count) // 2
				console.log(document.getElementById('title').innerText) // Zähler: 2
				document.title = 'Aktualisierte Anzahl ist:' + this.state.count
			}
		)
		konsole.log(dieser.zustand.anzahl) //1
	}
	rendern() {
		zurückkehren (
			<div>
				<h1 id='title'>Zähler: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

2. JSX-Syntaxkonvertierungsprozess

  • JSX ist lediglich syntaktischer Zucker (vereinfachte Syntax) für die Methode createElement().
  • Die JSX-Syntax wird vom Plugin @babel/preset-react in die Methode createElement() kompiliert.
  • React-Element: ist ein Objekt, das beschreibt, was Sie auf dem Bildschirm sehen möchten

Bildbeschreibung hier einfügen

React von „react“ importieren
ReactDOM von „react-dom“ importieren
//Konvertierungsprozess der JSX-Syntax// const element = <h1 className='greeting'>Hallo JSX</h1>
const-Element = React.createElement(
	'h1',
	{
		Klassenname: "Begrüßung",
	},
	„Hallo JSX“
)
console.log(Element)
ReactDOM.render(Element, Dokument.getElementById('root'))

3. Komponentenaktualisierungsmechanismus

  • Zwei Funktionen von setState(): 1. Status ändern 2. Komponenten aktualisieren (UI)
  • Prozess: Wenn die übergeordnete Komponente erneut gerendert wird, werden auch die untergeordneten Komponenten erneut gerendert, es wird jedoch nur der aktuelle Komponentenunterbaum (die aktuelle Komponente und alle ihre untergeordneten Komponenten) gerendert.

Bildbeschreibung hier einfügen

4. Optimierung der Komponentenleistung

4.1 Reduzierender Zustand

  • Status reduzieren: Speichern Sie nur Daten, die sich auf die Komponentendarstellung beziehen (z. B. Zähl-/Listendaten/Laden usw.).
  • Hinweis: Platzieren Sie keine Bücher im Status, die nicht gerendert werden müssen (z. B. Timer-ID usw.).
  • Daten, die in mehreren Methoden verwendet werden müssen, sollten hier abgelegt werden.

4.2 Unnötiges erneutes Rendern vermeiden

  • Mechanismus zur Komponentenaktualisierung: Aktualisierungen der übergeordneten Komponente führen dazu, dass auch die untergeordneten Komponenten aktualisiert werden
  • Problem: Untergeordnete Komponenten werden erneut gerendert, auch wenn sie sich nicht geändert haben, was zu unnötigem erneutem Rendering führt
  • Lösung: Verwenden Sie die Hook-Funktion shouldComponentUpdate(nextProps, nextState)
  • Funktion: Legt fest, ob die Komponente neu gerendert werden soll. Gibt true zurück. false bedeutet, dass die Komponente nicht neu gerendert werden soll.
  • Auslösezeitpunkt: Hook-Funktion in der Update-Phase, wird ausgeführt bevor die Komponente neu gerendert wird (shouldComponentUpdate -> render)
React von „react“ importieren
ReactDOM von „react-dom“ importieren
Klasse Opp erweitert React.Component {
	Zustand = {
		Anzahl: 0,
	}
	handleKlick = () => {
		this.setState((Zustand) => {
			zurückkehren {
				Anzahl: dieser.Zustand.Anzahl + 1,
			}
		})
	}
	//Hook-Funktion shouldComponentUpdate(nextProps, nextState) {
		// Gibt „false“ zurück, um ein erneutes Rendern der Komponente zu verhindern. // Gibt „false“ zurück.
		// Der neuste Status console.log('latest state', nextState)
		// Status vor der Aktualisierung console.log(this.state)
		//Gibt „true“ zurück, die Komponente wird erneut gerendert. Gibt „true“ zurück.
	}
	rendern() {
		console.log('Komponente aktualisiert')
		zurückkehren (
			<div>
				<h1>Zähler: {this.state.count}</h1>
				<button onClick={this.handleClick}>+1</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

Beispiel: Zufallszahlen

Über nextState

React von „react“ importieren
ReactDOM von „react-dom“ importieren
// Zufallszahlen generieren Klasse Opp erweitert React.Component {
	Zustand = {
		Nummer: 0,
	}
	handleKlick = () => {
		this.setState((Zustand) => {
			zurückkehren {
				Zahl: Math.floor(Math.random() * 3),
			}
		})
	}
	// Die zweimal generierten Zufallszahlen können gleich sein, daher ist ein erneutes Rendern nicht erforderlich shouldComponentUpdate(nextState) {
		console.log('Neuester Status:', nextState, 'Aktueller Status:', this.state)
		returniere nächsteZustandnummer !== dieseZustandnummer
		/* wenn (nächsterZustand.Nummer !== dieser.Zustand.Nummer) {
			returniere wahr
		}
		returniere false*/
	}
	rendern() {
		console.log('rendern')
		zurückkehren (
			<div>
				<h1>Zufallszahl: {this.state.number}</h1>
				<button onClick={this.handleClick}>Regenerieren</button>
			</div>
		)
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

Über nextState

React von „react“ importieren
ReactDOM von „react-dom“ importieren
// Zufallszahlen generieren Klasse Opp erweitert React.Component {
	Zustand = {
		Nummer: 0,
	}
	handleKlick = () => {
		this.setState((Zustand) => {
			zurückkehren {
				Zahl: Math.floor(Math.random() * 3),
			}
		})
	}
	rendern() {
		zurückkehren (
			<div>
				<NumberBox-Nummer = {diese.Bundeslandnummer} />
				<button onClick={this.handleClick}>Regenerieren</button>
			</div>
		)
	}
}
Klasse NumberBox erweitert React.Component {
	sollteComponentUpdate(nextProps) {
		console.log('neueste Eigenschaften:', nächste Eigenschaften, 'aktuelle Eigenschaften:', diese Eigenschaften)
		gibt nächsteProps.Nummer zurück !== diese.Props.Nummer
	}
	rendern() {
		console.log('Unterkomponenten-Render')
		return <h1>Zufallszahl: {this.props.number}</h1>
	}
}
ReactDOM.render(<Opp />, document.getElementById('root'))

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Eine detaillierte Erklärung, wie React Fiber funktioniert
  • Detaillierte Erläuterung der Vererbung, Instanziierung und des React-Super-(Props-)Prinzips der ES6-Klassenkette
  • Detaillierte Erklärung der Verwendung und Prinzipanalyse von Connect in React-Redux
  • Implementierung und Prinzip des On-Demand-Ladens von React-Router 4 – ausführliche Erläuterung

<<:  Prinzip der Docker-Containerüberwachung und Anweisungen zur Installation und Verwendung von cAdvisor

>>:  Binäre Typoperationen in MySQL

Artikel empfehlen

Mysql, einige komplexe SQL-Anweisungen (Abfragen und Löschen doppelter Zeilen)

1. Suchen Sie nach doppelten Zeilen Wählen Sie * ...

MySQL-Konfiguration Master-Slave-Server (ein Master und mehrere Slaves)

Inhaltsverzeichnis Ideen Hostkonfiguration Konfig...

CocosCreator allgemeines Framework-Design Ressourcenmanagement

Inhaltsverzeichnis Probleme mit der Ressourcenver...

Lösen Sie das Matching-Problem in CSS

Problembeschreibung Wie wir alle wissen, wird bei...

Detaillierte Erklärung der Fallstricke beim Mischen von npm und cnpm

Inhaltsverzeichnis Ursache Grund Einführung in NP...

Gründe und Methoden zum Warten auf die Sperre der Tabellenmetadaten in MySQL

Wenn MySQL DDL-Operationen wie „Alter Table“ ausf...

MySQL-Vorkompilierung in einem Artikel verstehen

1. Vorteile der Vorkompilierung Wir haben alle di...

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Webdesign und -entwicklung sind harte Arbeit, als...

So verwenden Sie crontab zum Hinzufügen geplanter Aufgaben in Linux

Vorwort Das Linux-System wird durch den Systemdie...

Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue

Manchmal stoßen wir auf eine solche Anforderung, ...