ReactJS - Zustand

Stateist der Ort, von dem die Daten stammen. Wir sollten immer versuchen, unseren Zustand so einfach wie möglich zu gestalten und die Anzahl der zustandsbehafteten Komponenten zu minimieren. Wenn wir beispielsweise zehn Komponenten haben, die Daten aus dem Status benötigen, sollten wir eine Containerkomponente erstellen, die den Status für alle Komponenten beibehält.

Status verwenden

Der folgende Beispielcode zeigt, wie eine statusbehaftete Komponente mithilfe der EcmaScript2016-Syntax erstellt wird.

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 führt zu folgendem Ergebnis.