Niveau de plomb : méthodes de cycle de vie et hooks dans React

王林

Libérer： 2024-07-18 01:15:38

original

804 Les gens l'ont consulté

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)}

Dans cet exemple, useFetch est un hook personnalisé qui récupère les données d'une URL donnée.

Modèles de crochets avancés

Gestion de l'état complexe avec useReducer

Lorsqu'il s'agit d'une logique d'état complexe impliquant plusieurs sous-valeurs ou lorsque l'état suivant dépend du précédent, useReducer peut être plus approprié que useState.

Exemple :

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;

Dans cet exemple, useReducer gère l'état du comptage avec une fonction de réduction.

Optimiser les performances avec useMemo et useCallback

utiliserMémo

useMemo est un hook qui mémorise une valeur calculée, la recalculant uniquement lorsque l'une des dépendances change. Il permet d'optimiser les performances en évitant des calculs coûteux à chaque rendu.

Exemple :

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;

Dans cet exemple, useMemo garantit que le calcul factoriel n'est recalculé que lorsque le nombre change.

utiliserCallback

useCallback est un hook qui mémorise une fonction, empêchant sa recréation à chaque rendu à moins que l'une de ses dépendances ne change. Il est utile pour transmettre des fonctions stables aux composants enfants qui reposent sur l'égalité de référence.

Exemple :

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;

Dans cet exemple, useCallback garantit que la fonction d'incrémentation n'est recréée que si ses dépendances changent, évitant ainsi les nouveaux rendus inutiles du composant Button.

Conclusion

La maîtrise des React Hooks et des méthodes de cycle de vie est essentielle pour créer des applications robustes et maintenables. En comprenant et en utilisant des hooks tels que useState, useEffect, useContext et useReducer, ainsi que des modèles avancés tels que des hooks personnalisés et des optimisations de performances avec useMemo et useCallback, vous pouvez créer des applications React efficaces et évolutives. En tant que développeur principal, ces compétences amélioreront considérablement votre capacité à guider votre équipe dans le développement d'applications React de haute qualité, en garantissant le maintien des meilleures pratiques et des normes élevées tout au long du processus de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!