Qual è la differenza tra useEffect e function body? [duplicare]

Question

Oltre alla pulizia e all'array delle dipendenze, c'è qualche motivo per usarlo useEffect?

function App() {
  const [a, setA] = useState(0);

  const b = `Number: ${a}`;

  return (
    <div className="App">
        <p>
          {b}
        </p>
        <button onClick={() => setA(a + 1)}>click</button>
    </div>
  );
}

Come possiamo vedere, non usiamo il useEffect, ma poiché il cambiamento di stato aattiverà il ri-rendering, anche questo bverrà modificato. Sembra che useEffectin questo caso non ne abbiamo nemmeno bisogno .

Quindi c'è qualche vantaggio unico dall'eccezione useEffectper la pulizia e l'array di dipendenze?

modificare

Penso che la maggior parte delle risposte si basino su un presupposto: l'OP ha una buona comprensione della logica del ciclo di vita di reazione. Ma sfortunatamente, questa è la mia debolezza.

Anche se ho usato molto i metodi del useEffectvecchio component*ciclo di vita, non mi ero reso conto che si trattava di qualcosa al di fuori della componente funzione stessa. Che dà loro più flessibilità e funzionalità.

Non sto cercando di insultare nessuno, ma penso che dovremmo rispondere alla domanda in modo più specifico e attento. Chiunque attraversi il mio profilo può vedere che ho anche risposto a molte domande. Sulla base della mia esperienza, le persone di solito non hanno le conoscenze per porre anche una domanda critica e chiara, non si rendono nemmeno conto di quale sia il punto chiave (Sì, sono uno di loro in questa domanda).

Quando cerco di rispondere alla domanda, cercherò prima di chiarire la domanda per capire qual è il pezzo critico che manca all'OP.

@PatrickRoberts stava dicendo esattamente qualcosa che è corretto, ma questo non mi ha aiutato molto perché non è il pezzo che mi mancava. Mi insulterei per non aver chiarito abbastanza la domanda. Ma voglio anche dire che capire / chiarire la domanda è più importante che dare la risposta corretta. Dopotutto, in teoria, la maggior parte delle domande può essere risolta con documenti ufficiali.

Answer 1

Usando questo Hook, dite a React che il vostro componente deve fare qualcosa dopo il rendering. React ricorderà la funzione che hai passato (la chiameremo il nostro "effetto") e la chiamerà più tardi dopo aver eseguito gli aggiornamenti DOM. In questo effetto, impostiamo il titolo del documento, ma potremmo anche eseguire il recupero dei dati o chiamare qualche altra API imperativa.

function Example() {
 const [count, setCount] = useState(0);

 useEffect(() => {
   document.title = `You clicked ${count} times`;
 });
}

A differenza di componentDidMount o componentDidUpdate, gli effetti programmati con useEffectnon impediscono al browser di aggiornare lo schermo. Questo rende la tua app più reattiva. La maggior parte degli effetti non deve avvenire in modo sincrono.