Native - State reagieren

Reaktionskomponenten werden von den darin enthaltenen Daten verwaltet state und props. In diesem Kapitel werden wir darüber sprechenstate.

Unterschied zwischen Staat und Requisiten

das state ist dabei veränderlich propssind unveränderlich. Dies bedeutet, dassstate kann in Zukunft aktualisiert werden, während die richtigen nicht aktualisiert werden können.

mit State

Dies ist unsere Wurzelkomponente. Wir importieren nurHome Dies wird in den meisten Kapiteln verwendet.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

Wir können den Emulatortext aus dem Status wie im folgenden Screenshot sehen.

Statusaktualisierung

Da state veränderbar ist, können wir ihn aktualisieren, indem wir den erstellen deleteState Funktion und rufen Sie es mit der onPress = {this.deleteText} Veranstaltung.

Home.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

NOTES- In allen Kapiteln verwenden wir die Klassensyntax für statusbehaftete (Container-) Komponenten und die Funktionssyntax für zustandslose (Präsentations-) Komponenten. Wir werden im nächsten Kapitel mehr über Komponenten erfahren.

Wir werden auch lernen, wie man die Funktionssyntax für Home verwendet updateState. Beachten Sie, dass diese Syntax den lexikalischen Bereich und verwendetthisDas Schlüsselwort wird an das Umgebungsobjekt (Klasse) gebunden. Dies führt manchmal zu unerwartetem Verhalten.

Die andere Möglichkeit, Methoden zu definieren, besteht darin, die EC5-Funktionen zu verwenden. In diesem Fall müssen wir jedoch binden thismanuell im Konstruktor. Betrachten Sie das folgende Beispiel, um dies zu verstehen.

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}