Gelöst: So installieren Sie React Native Hooks mit

Natürlich, hier geht der Artikel:

React Native ist eine innovative Technologie von Facebook, die es Entwicklern ermöglicht, mobile Apps mit JavaScript zu erstellen und gleichzeitig eine echte native Benutzeroberfläche bereitzustellen. Dies wird durch die Einbindung nativer, von JavaScript gesteuerter Komponenten erreicht. Ein wesentliches Merkmal ist die Verwendung funktionaler Komponenten anstelle klassenbasierter Komponenten durch React Native Hooks, eine leistungsstarke Ergänzung zu React.

React Native Hooks können Ihre Codebasis kleiner, einfacher und verständlicher machen. In diesem Artikel erfahren Sie, wie Sie React Native Hooks in Ihrer Anwendung installieren und implementieren.

Installation von React Native Hooks

Um Hooks verwenden zu können, benötigen Sie eine bestimmte Version von React und React Native. Die React-Version sollte 16.8 oder höher sein und die React Native-Version sollte 0.59 oder höher sein.

npm install react@^16.8.3 react-native@^0.59.8 --save

Der obige Befehl installiert die erforderlichen React- und React Native-Versionen und speichert sie als Abhängigkeiten in Ihrem Projekt.

Einführung von Hooks im React Native-Projekt

React Native Hooks sind Funktionen, mit denen Sie Status- und andere React-Funktionen verwenden können, ohne eine Klasse schreiben zu müssen. Sie wurden in der React-Version 16.8 hinzugefügt. Schauen wir uns an, wie sie in Ihr React Native-Projekt integriert werden können.

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

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

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

useState ist ein Hook, der Ihren Funktionskomponenten den React-Status hinzufügt. Im obigen Beispiel initialisieren wir eine neue Zustandsvariable namens count.

Entdecken Sie andere beliebte Hooks

React Native bietet eine Vielzahl von Hooks wie useState, useEffect, useContext, useReducer und useCallback. Lassen Sie uns hier die Verwendung von useEffect untersuchen, das Nebenwirkungen in den Funktionskomponenten verwaltet.

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

useEffekt erfüllt den gleichen Zweck wie „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ in React-Klassen, ist jedoch in einer einzigen API zusammengefasst. Es wird nach jedem Rendern ausgeführt.

React Native Hooks können Ihren Code vereinfachen und die Verwaltung von Status- und Nebeneffekten erleichtern, was zu unkomplizierterem Code und Anwendungen führen kann, die einfacher zu warten und zu debuggen sind.