React Hooks ti consente di utilizzare lo stato e altre funzionalità di React senza dover creare un componente di classe React. Usando gli hook, puoi costruire applicazioni React completamente operative esclusivamente con Function Components. Non più class Example extends React.component {}richiesto.

Ganci di base

Ganci quotidiani per casi d'uso quotidiani.

React Basic Hooks
- useState
- useEffect => Questo articolo
- useContext => In arrivo

useEffect

Documentazione ufficiale per useEffect

argomenti della funzione useEffect

1. Funzione da eseguire durante il ciclo di vita del componente.
2. Matrice di valori useEffect controlla le modifiche per attivare l'attivazione. Il passaggio di un array vuoto imita i metodi e i componenti React basati su una classe .componentDidMountcomponentWillUnmount

Descrizione

useEffectviene utilizzato per eseguire il codice ogni volta che (è possibile limitare l'attivazione della funzione a determinate condizioni) il componente viene visualizzato sullo schermo. È possibile utilizzare più istanze di useEffectin un componente, ma assicurarsi che vengano sempre eseguite nello stesso ordine. Se le funzioni useStatee useEffectnon si attivano nello stesso ordine, ti divertirai molto (maggiori informazioni sull'esecuzione dell'ordinamento corretto di seguito). useEffectle funzioni possono anche ripulire se stesse restituendo una funzione.

Esempi

Comprensione dell'uso di base e pulizia dopo l'esecuzione.

Il codice seguente verrà eseguito dopo ogni rendering.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Sito web personale
LinkedIn
Instagram