Wenn Sie React Native oder React noch nicht kennen, sind Ihnen die Wörter „state“ und „props“ schon einmal begegnet. Das Verständnis dieser beiden ist für die Entwicklung dynamischer und anpassungsfähiger mobiler Anwendungen von entscheidender Bedeutung. In diesem Blog-Artikel gehen wir ausführlich auf Status und Requisiten ein, untersuchen ihre Unterschiede und erfahren, wie Sie den Datenfluss in Ihrer React Native-Anwendung effektiv handhaben.

Was sind Status und Requisiten?

Zustand

State ist ein integriertes Objekt, das es Komponenten ermöglicht, ihre eigenen Daten zu erstellen und zu verwalten. Es enthält Informationen, die sich im Laufe des Lebenszyklus der Komponente ändern können. Immer wenn sich der Status ändert, wird die Komponente neu gerendert, um diese Änderungen widerzuspiegeln.

• Veränderlich: Der Status kann mit setState (in Klassenkomponenten) oder useState-Hook (in Funktionskomponenten) geändert werden.
• Lokal für die Komponente: Der Status ist vollständig gekapselt und lokal für die Komponente.
• Löst erneutes Rendern aus: Das Aktualisieren des Status führt dazu, dass die Komponente erneut gerendert wird.

Requisiten

Props, kurz für Eigenschaften, sind schreibgeschützte Komponenten. Dabei handelt es sich um externe Parameter, die an eine Komponente übergeben werden, ähnlich wie Argumente an eine Funktion übergeben werden.

• Unveränderlich: Requisiten können von der Komponente, die sie empfängt, nicht geändert werden.
• Von übergeordneten Komponenten weitergegeben: Requisiten werden von übergeordneten Komponenten an untergeordnete Komponenten übergeben.
• Wird zur Konfiguration verwendet: Sie konfigurieren eine Komponente und steuern ihr Verhalten extern.

Den Unterschied verstehen

Zu verstehen, wann der Status und wann Requisiten verwendet werden sollten, ist der Schlüssel zur Verwaltung des Datenflusses in Ihrer App.

Warum sind sie wichtig?

• State ist wichtig für Komponenten, die Benutzereingaben, API-Antworten oder andere dynamische Daten verfolgen und darauf reagieren müssen.
• Requisiten ermöglichen die Wiederverwendbarkeit von Komponenten, indem sie dynamische Daten und Funktionen akzeptieren, wodurch Ihr Code modularer und wartbarer wird.

Datenfluss effektiv verwalten

Eine effektive Datenflussverwaltung stellt sicher, dass sich Ihre App vorhersehbar verhält und einfacher zu debuggen und zu warten ist.

1. Unidirektionaler Datenfluss

React Native verwendet einen unidirektionalen Datenfluss. Daten werden über Requisiten von übergeordneten zu untergeordneten Komponenten verschoben. Dadurch ist der Datenfluss leichter zu verstehen und zu debuggen.

2. Den Staat anheben

Wenn mehrere Komponenten Zugriff auf dasselbe Datenelement benötigen, ist es am besten, den Status auf den nächsten gemeinsamen Vorfahren zu heben. Auf diese Weise kann der gemeinsame Zustand über Requisiten weitergegeben werden.

3. Rückrufe für die Kommunikation zwischen Kind und Eltern verwenden

Um untergeordneten Komponenten die Kommunikation mit übergeordneten Komponenten zu ermöglichen, können Sie Funktionen (Rückrufe) als Requisiten weitergeben. Die untergeordnete Komponente kann dann diese Funktion aufrufen, um Daten an die übergeordnete Komponente zurückzusenden.

Beispiele

Sehen wir uns einige Codebeispiele an, um diese Konzepte zu veranschaulichen.

Beispiel 1: Verwendung von Requisiten

Übergeordnete Komponente (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
  );
};

export default App;

Untergeordnete Komponente (Greeting.js):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

Erläuterung:

• Die App-Komponente übergibt die Namensstütze an die Greeting-Komponente.
• Die Greeting-Komponente empfängt Requisiten und verwendet props.name, um eine personalisierte Nachricht anzuzeigen.

Beispiel 2: Verwendung von State

Zählerkomponente (Counter.js):

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    You clicked {count} times setCount(count   1)} />
    
  );
};

export default Counter;

Erläuterung:

• Wir verwenden den useState-Hook, um count auf 0 zu initialisieren.
• Die Funktion setCount aktualisiert den Status.
• Wenn die Schaltfläche gedrückt wird, erhöht sich die Anzahl und die Komponente wird erneut gerendert, um die neue Anzahl anzuzeigen.

Beispiel 3: Status anheben

Übergeordnete Komponente (TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
  );
};

export default TemperatureConverter;

Untergeordnete Komponente (TemperatureInput.js):

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

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:>
  );
};

export default TemperatureInput;

Erläuterung:

• Die gemeinsame Zustandstemperatur und -skala werden auf die TemperatureConverter-Komponente übertragen.
• TemperatureInput-Komponenten empfangen Requisiten und übermitteln Änderungen über Rückrufe an das übergeordnete Element.

Best Practices

1. Komponenten nach Möglichkeit zustandslos halten

Zustandslose Komponenten sind einfacher zu testen und zu debuggen. Verwenden Sie Requisiten, um Daten an sie zu übergeben.

2. Statefulness minimieren

Verwenden Sie den Status nur bei Bedarf. Zu viele zustandsbehaftete Komponenten können die Verwaltung Ihrer App erschweren.

3. Vermeiden Sie direkte Zustandsmutationen

Ändern Sie den Zustand niemals direkt. Verwenden Sie immer setState oder die Updater-Funktion von useState.

4. Verwenden Sie PropTypes zur Typprüfung

Verwenden Sie PropTypes, um die beabsichtigten Arten von Eigenschaften zu dokumentieren, die an Komponenten übergeben werden.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. Verwenden Sie die Kontext-API für den globalen Status

Für Daten, auf die viele Komponenten auf unterschiedlichen Verschachtelungsebenen zugreifen müssen, sollten Sie die Verwendung der Kontext-API in Betracht ziehen.

Häufige Fehler, die es zu vermeiden gilt

• Zustand direkt mutieren:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• Verwenden von Requisiten zum direkten Ändern des übergeordneten Status:

Untergeordnete Komponenten sollten nicht versuchen, Requisiten oder den Status des übergeordneten Elements direkt zu ändern. Rückrufe verwenden.

Abschluss

Das Verständnis und die effektive Verwaltung von Status und Requisiten ist für jeden React Native-Entwickler von entscheidender Bedeutung. Wenn Sie diese Konzepte beherrschen, können Sie Anwendungen erstellen, die nicht nur funktional, sondern auch sauber, effizient und wartbar sind.

Erinnern:

• Status gilt für Daten, die sich im Laufe der Zeit ändern und innerhalb der Komponente verwaltet werden.
• Requisiten dienen der Weitergabe von Daten und Funktionen im Komponentenbaum.

Nehmen Sie sich die Zeit, diese Konzepte in Ihren Projekten zu üben, und Sie werden eine deutliche Verbesserung Ihres Entwicklungsworkflows feststellen.