Exploiter la puissance de React : guide complet sur useState et useEffect-js tutoriel-php.cn

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

DDD

Libérer： 2024-11-02 04:33:02

original

393 Les gens l'ont consulté

Harnessing the Power of React: Comprehensive Guide to useState and 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));
};

Copier après la connexion

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

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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
  };
}, []);

Copier après la connexion

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
  };
}, []);

Copier après la connexion

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
  };
}, []);

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!