react-native
Zustand

Syntax

• void setState (Funktion | Objekt nextState, [Funktionsrückruf])

setState

Um die Ansicht in Ihrer Anwendung zu ändern, können Sie setState verwenden. setState wird Ihre Komponente und alle ihre setState Komponenten erneut setState . setState führt eine flache Verschmelzung zwischen dem neuen und dem vorherigen Status durch und löst ein erneutes Rendern der Komponente aus.

setState nimmt entweder ein Schlüsselwertobjekt oder eine Funktion, die ein Schlüsselwertobjekt zurückgibt

Schlüsselwertobjekt

this.setState({myKey: 'myValue'});

Funktion

Die Verwendung einer Funktion ist nützlich, um einen Wert basierend auf dem vorhandenen Status oder den vorhandenen Requisiten zu aktualisieren.

this.setState((previousState, currentProps) => {
    return {
        myInteger: previousState.myInteger+1
    }
})

Sie können auch einen optionalen Rückruf an setState , der ausgelöst wird, wenn die Komponente mit dem neuen Status erneut gerendert wurde.

this.setState({myKey: 'myValue'}, () => {
    // Component has re-rendered... do something amazing!
));

Vollständiges Beispiel

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

export default class MyParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      myInteger: 0
    }

  }
  getRandomInteger() {
    const randomInt = Math.floor(Math.random()*100);

    this.setState({
      myInteger: randomInt
    });

  }
  incrementInteger() {
    
    this.setState((previousState, currentProps) => {
      return {
        myInteger: previousState.myInteger+1
      }
    });

  }
  render() {

    return <View style={styles.container}>
      
      <Text>Parent Component Integer: {this.state.myInteger}</Text>

      <MyChildComponent myInteger={this.state.myInteger} />

      <Button label="Get Random Integer" onPress={this.getRandomInteger.bind(this)} />
      <Button label="Increment Integer" onPress={this.incrementInteger.bind(this)} />

    </View>

  }
}

export default class MyChildComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    
    // this will get updated when "MyParentComponent" state changes
    return <View>
      <Text>Child Component Integer: {this.props.myInteger}</Text>
    </View>
    
  }
}

export default class Button extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return <TouchableOpacity onPress={this.props.onPress}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>{this.props.label}</Text>
        </View>
      </TouchableOpacity>
    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    backgroundColor: '#444',
    padding: 10, 
    marginTop: 10
  },
  buttonText: {
    color: '#fff'
  }
});

AppRegistry.registerComponent('MyApp', () => MyParentComponent);

Zustand initialisieren

Sie sollten den Status in der Konstruktorfunktion Ihrer Komponente folgendermaßen initialisieren:

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      myInteger: 0
    }
  }
  render() {
    return  (
      <View>
        <Text>Integer: {this.state.myInteger}</Text>
      </View>
    )
  }
}

Mit setState kann man die Ansicht aktualisieren.