Exploiter la puissance de React : guide complet sur useState et useEffect

Cas d'utilisation avancés pour useState

1. Gestion des tableaux et des objets

Lorsque vous traitez des tableaux et des objets dans un état, vous devez vous assurer que vous les mettez à jour de manière immuable. Cela évite les mutations indésirables qui pourraient conduire à des bugs.

Gérer un tableau d'objets

const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]);
};

const removeItem = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};

Mise à jour d'un objet dans l'état

const [user, setUser] = useState({ name: '', age: 0 });

const updateUser = (field, value) => {
  setUser(prevUser => ({ ...prevUser, [field]: value }));
};

2. Mises à jour fonctionnelles

L'utilisation de mises à jour fonctionnelles avec useState peut vous aider à éviter les problèmes lorsque vous vous fiez à l'état actuel, en particulier dans les situations asynchrones.

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

3. Initialisation paresseuse

Vous pouvez définir l'état initial à l'aide d'une fonction, ce qui peut être utile pour des calculs coûteux ou lorsque la valeur initiale est dérivée d'accessoires.

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? JSON.parse(savedCount) : 0;
});

Modèles courants avec useState

1. Composants contrôlés

Utilisation de useState dans les formulaires pour contrôler les entrées :

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
};

2. Entrée anti-rebond

Vous pouvez créer une entrée anti-rebond en utilisant useState et useEffect :

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

Cas d'utilisation avancés pour useEffect

1. Récupération de données avec annulation

Lors de la récupération de données, il est recommandé de gérer le démontage des composants pour éviter de définir l'état d'un composant non monté.

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    if (isMounted) {
      setData(result);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

2. Abonnement aux événements

Vous pouvez vous abonner à des événements tels que des connexions WebSocket ou d'autres sources de données externes.

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setMessages(prevMessages => [...prevMessages, message]);
  };

  return () => {
    socket.close(); // Cleanup on unmount
  };
}, []);

3. Animations et manipulations DOM

Vous pouvez utiliser useEffect pour des animations ou des manipulations directes du DOM :

useEffect(() => {
  const element = document.getElementById('animate');
  element.classList.add('fade-in');

  return () => {
    element.classList.remove('fade-in'); // Cleanup
  };
}, []);

Pièges courants

1. Tableau de dépendances manquant

Si vous omettez le tableau de dépendances, votre effet s'exécutera après chaque rendu, ce qui pourrait entraîner des problèmes de performances.

// Avoid this if you only want it to run once
useEffect(() => {
  // Logic here
});

2. Liste de dépendances incorrecte

Assurez-vous d'inclure toutes les variables utilisées dans l'effet :

useEffect(() => {
  console.log(value); // Make sure 'value' is included in the dependency array
}, [value]); // Include all dependencies

3. Mise à jour de l'état en fonction de l'état précédent

Utilisez toujours la forme fonctionnelle du setter lors de la mise à jour de l'état en fonction des valeurs précédentes pour éviter les fermetures obsolètes :

setCount(prevCount => prevCount + 1); // Correct

Conclusion

useState et useEffect sont tous deux des hooks essentiels dans React qui vous permettent de gérer l'état et de gérer efficacement les effets secondaires dans les composants fonctionnels. Comprendre les cas d'utilisation et les modèles avancés peut vous aider à écrire du code React plus propre et plus efficace.

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!