Praktikantenebene: Lebenszyklusmethoden und Hooks in React

PHPz

Freigeben： 2024-07-18 04:24:30

Original

929 Leute haben es durchsucht

import React, { useState } from 'react';

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

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

export default Counter;

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

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

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

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

In diesem Beispiel ist useFetch ein benutzerdefinierter Hook, der Daten von einer bestimmten URL abruft.

Erweiterte Hook-Muster

Komplexen Zustand mit useReducer verwalten

Beim Umgang mit komplexer Zustandslogik mit mehreren Unterwerten oder wenn der nächste Zustand vom vorherigen abhängt, kann useReducer besser geeignet sein als useState.

Beispiel:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

In diesem Beispiel verwaltet useReducer den Zählstatus mit einer Reduzierfunktion.

Optimieren der Leistung mit useMemo und useCallback

Verwenden Sie Memo

useMemo ist ein Hook, der einen berechneten Wert speichert und ihn nur dann neu berechnet, wenn sich eine der Abhängigkeiten ändert. Es hilft, die Leistung zu optimieren, indem teure Berechnungen bei jedem Rendern vermieden werden.

Beispiel:

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

const ExpensiveCalculation = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    return n <= 1 ? 1 : n * computeFactorial(n - 1);
  };

  const factorial = useMemo(() => computeFactorial(number), [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

const App = () => {
  const [number, setNumber] = useState(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <ExpensiveCalculation number={number} />
    </div>
  );
};

export default App;

In diesem Beispiel stellt useMemo sicher, dass die Fakultätsberechnung nur dann neu berechnet wird, wenn sich die Zahl ändert.

useCallback

useCallback ist ein Hook, der sich eine Funktion merkt und deren Neuerstellung bei jedem Rendern verhindert, es sei denn, eine ihrer Abhängigkeiten ändert sich. Es ist nützlich, um stabile Funktionen an untergeordnete Komponenten zu übergeben, die auf Referenzgleichheit basieren.

Beispiel:

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

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

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

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <Button onClick={increment}>Increment</Button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

In diesem Beispiel stellt useCallback sicher, dass die Inkrementierungsfunktion nur dann neu erstellt wird, wenn sich ihre Abhängigkeiten ändern, wodurch unnötige erneute Renderings der Button-Komponente vermieden werden.

Abschluss

Das Verständnis von React Hooks ist für die moderne React-Entwicklung unerlässlich. Sie ermöglichen es Ihnen, saubereren und wartbareren Code in Funktionskomponenten zu schreiben. Indem Sie Hooks wie useState, useEffect, useContext und useReducer sowie erweiterte Muster wie benutzerdefinierte Hooks und Leistungsoptimierungen mit useMemo und useCallback beherrschen, können Sie robuste und effiziente React-Anwendungen erstellen. Wenn Sie als Praktikant ein solides Verständnis dieser Konzepte erlangen, legen Sie eine solide Grundlage für Ihre Reise in die React-Entwicklung.

Das obige ist der detaillierte Inhalt vonPraktikantenebene: Lebenszyklusmethoden und Hooks in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!