React Hooks in Aktion: Eingehende Analyse von useState bis useContext

Eingehende Analyse von useState und useContext

React Hooks haben die Zustandsverwaltung und Funktionswiederverwendung von React-Komponenten vollständig verändert, sodass Funktionskomponenten die Funktionen von Klassenkomponenten haben können.

useState: Zustandsverwaltung von Funktionskomponenten

Einführung:

useState ist der grundlegendste Hook in React, der es uns ermöglicht, Funktionskomponenten einen Status hinzuzufügen. useState ist ein von React bereitgestellter integrierter Hook zum Hinzufügen eines lokalen Status zu Funktionskomponenten. Es akzeptiert einen Anfangswert als Parameter und gibt ein Array zurück. Das erste Element des Arrays ist der aktuelle Status und das zweite Element ist eine Funktion, die den Status aktualisiert.

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Die von useState zurückgegebene Funktion setCount wird zum Aktualisieren des Status verwendet. Jedes Mal, wenn setCount aufgerufen wird, rendert React die Komponente neu und generiert das virtuelle DOM basierend auf dem neuen Statuswert neu, führt dann einen effizienten DOM-Diff durch und aktualisiert schließlich das tatsächliche DOM.

Vertieftes Verständnis von

Wie useState funktioniert, die Asynchronität von Statusaktualisierungen und ihre Auswirkungen auf die Leistung.

• Statusaktualisierungen erfolgen asynchron, was bedeutet, dass React nur den letzten Wert verwendet, wenn setCount mehrmals in derselben Ereignisschleife aufgerufen wird.

• useState unterstützt keinen flachen Vergleich komplexer Objekte. Wenn Sie den Status basierend auf dem vorherigen Status aktualisieren müssen, können Sie die Funktionsform von setCount verwenden, z. B. setCount(prevCount => prevCount 1).

Erweiterte Anwendung

Kombiniert mit useEffect, um Nebenwirkungen wie Datenerfassung und -bereinigung zu bewältigen.

import React, { useState, useEffect } from 'react';

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

); } export default Example;

Nach dem Login kopieren

Interpretation des Codebeispiels: Zuerst verwenden wir useState, um drei Zustandsvariablen zu erstellen: „Data“ speichert die erfassten Daten, „Loading“ gibt an, ob die Daten geladen werden, und „Error“ speichert alle möglichen Fehlerinformationen.

Dann definieren wir eine fetchData-Funktion für die asynchrone Datenerfassung. Diese Funktion enthält Fehlerbehandlung und Statusaktualisierungslogik.

Als nächstes verwenden wir useEffect, um die Datenerfassung durchzuführen. Der zweite Parameter von useEffect ist ein Abhängigkeitsarray. Die Übergabe eines leeren Arrays bedeutet, dass es nur einmal nach dem Mounten der Komponente ausgeführt wird, d. h. die Daten werden beim ersten Rendern erfasst. Dadurch wird sichergestellt, dass die Daten erfasst werden, wenn die Komponente geladen wird, und nicht jedes Mal neu erfasst werden, wenn der Status aktualisiert wird.

In der Callback-Funktion von useEffect rufen wir die fetchData-Funktion auf. Da fetchData die Werte von Daten, Laden und Fehler ändert, besteht keine Notwendigkeit, diese Statusvariablen zum Abhängigkeitsarray hinzuzufügen, da ihre Änderungen das erneute Rendern der Komponente auslösen und dadurch automatisch eine neue Datenerfassung durchführen.

useContext: Eine kontextbezogene Lösung für den gemeinsamen Status

Einführung

useContext wird verwendet, um Daten über Komponenten hinweg zu übergeben, ohne explizit Requisiten zu übergeben.

Zuerst müssen wir einen Kontext erstellen:

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

然后在组件中使用 useContext:

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

Funktion Button() {
  const theme = useContext(ThemeContext);

  zurückkehren (
    <Schaltfläche>



<h4>
  
  
  Tiefgehendes Verständnis
</h4>

<ul>
<li>Komponenten, die useContext verwenden, werden neu gerendert, wenn der Anbieter aktualisiert wird, auch wenn sich die anderen Zustände der Komponente nicht geändert haben.</li>
<li>Wenn mehrere Komponenten denselben Kontext abonnieren, werden sie alle neu gerendert, wenn sich der Anbieterstatus ändert, was zu unnötigem Leistungsaufwand führen kann. Dies kann durch Strategien wie React.memo oder ShouldComponentUpdate optimiert werden.</li>
<li>Um Missbrauch zu verhindern, verwenden Sie Kontext nur, wenn Sie den Status über mehrere Ebenen hinweg teilen müssen. Andernfalls sollten Requisiten Vorrang haben.</li>
</ul>

<h3>
  
  
  Kombinierte Anwendung von useState und useContext
</h3>

<p>Durch die Kombination von useState und useContext können wir eine Zähleranwendung mit Themenwechselfunktion erstellen:<br>
</p>

<pre class="brush:php;toolbar:false">import React, { createContext, useState, useContext } from 'react';

// Einen ThemeContext erstellen
const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  zurückkehren (
    <ThemeContext.Provider value={theme}>
      {Kinder}
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Thema umschalten
      </button>
    </ThemeContext.Provider>
  );
}

Funktion Counter() {
  const theme = useContext(ThemeContext);
  const [count, setCount] = useState(0);

  zurückkehren (
    <div>



<p>Erklärung des Codebeispiels: ThemeProvider verwendet useState, um den Themenstatus zu verwalten, und die Counter-Komponente abonniert das Thema über useContext und verwendet useState, um den Zählerstatus zu verwalten. Wenn das Thema gewechselt wird, wird Counter neu gerendert, um die Farbe des entsprechenden Themas anzuzeigen.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonReact Hooks in Aktion: Eingehende Analyse von useState bis useContext. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!