ReactJS Zustand (State)

ZustandQuelle der Daten. Wir sollten versuchen, unseren Zustand so einfach wie möglich zu halten und die Anzahl der komponenten mit Zustand zu minimieren. Zum Beispiel, wenn wir haben10Wenn eine Komponente Daten aus dem Zustand benötigt, sollten wir eine Containerkomponente erstellen, um den Zustand aller Komponenten zu speichern.

Verwendung von Zustand

Das folgende Beispielcode zeigt, wie man EcmaScript2016Syntax zum Erstellen von komponenten mit Zustand.

App.jsx

import React from 'react';
class App extends React.Component { constructor(props) { super(props); }
　　　　　　this.state = {
　　　　　　　　　header: "Header from state...",
　　　　　　　　　content: "Content from state..."
　　　　　　}
　　　} render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.state.header}</h1>
　　　　　　　　　　　　<h2>{this.state.content}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '.'/App.jsx';
ReactDOM.render(<App　/,	document.getElementById('app'));

Dies wird das folgende Ergebnis erzeugen.