Come usare componentWillMount () in React Hooks?

Nei documenti ufficiali di React menziona:

Se hai familiarità con i metodi del ciclo di vita della classe React, puoi pensare a useEffect Hook come componentDidMount, componentDidUpdate e componentWillUnmount combinati.

La mia domanda è: come possiamo usare il componentWillMount()metodo del lifecyle in un gancio?

Non è possibile utilizzare uno dei metodi del ciclo di vita esistenti ( componentDidMount, componentDidUpdate, componentWillUnmountecc) in un gancio. Possono essere utilizzati solo nei componenti di classe. E con Hooks è possibile utilizzare solo componenti funzionali. La riga seguente proviene dal documento React:

Se si ha familiarità con i metodi di classe Reagire del ciclo di vita, si può pensare di useEffectHook come componentDidMount, componentDidUpdatee componentWillUnmountcombinato.

suggerire è che è possibile imitare questi metodi del ciclo di vita dal componente di classe in un componente funzionale.

Il codice interno viene componentDidMounteseguito una volta quando il componente è montato. useEffecthook equivalente per questo comportamento è

useEffect(() => {
  // Your code here
}, []);

Notare qui il secondo parametro (matrice vuota). Questo verrà eseguito solo una volta.

Senza il secondo parametro l' useEffecthook verrà chiamato su ogni rendering del componente che può essere pericoloso.

useEffect(() => {
  // Your code here
});

componentWillUnmountè utilizzato per la pulizia (come rimuovere listener di eventi, annullare il timer ecc.). Supponi di aggiungere un listener di eventi componentDidMounte di rimuoverlo componentWillUnmountcome di seguito.

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

L'equivalente hook del codice precedente sarà il seguente

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

hook useComponentDidMount

Nella maggior parte dei casi useComponentDidMountè lo strumento da utilizzare. Funzionerà solo una volta, dopo che il componente è stato montato (rendering iniziale).

 const useComponentDidMount = func => useEffect(func, []);

useComponentWillMount

È importante notare che i componenti di classe componentWillMountsono considerati legacy. Se è necessario eseguire il codice una sola volta prima del montaggio del componente, è possibile utilizzare il costruttore. Maggiori informazioni qui . Poiché il componente funzionale non ha l'equivalente di un costruttore, l'uso di un hook per eseguire il codice solo una volta prima che i montaggi dei componenti possano avere senso in alcuni casi. Puoi raggiungerlo con un gancio personalizzato.

const useComponentWillMount = func => {
  const willMount = useRef(true);

  if (willMount.current) {
    func();
  }

  willMount.current = false;
};

Tuttavia, c'è una trappola. Non utilizzarlo per impostare in modo asincrono il tuo stato (ad es. A seguito di una richiesta del server. Poiché potresti aspettarti che influisca sul rendering iniziale che non lo farà). Tali casi dovrebbero essere gestiti con useComponentDidMount.

dimostrazione

const Component = (props) => {
  useComponentWillMount(() => console.log("Runs only once before component mounts"));
  useComponentDidMount(() => console.log("Runs only once after component mounts"));
  ...

  return (
    <div>{...}</div>
  );
}

Demo completa

Secondo reagjs.org, componentWillMount non sarà supportato in futuro. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Non è necessario utilizzare componentWillMount.

Se vuoi fare qualcosa prima che il componente sia montato, fallo nel costruttore ().

Se si desidera eseguire richieste di rete, non farlo in componentWillMount. È perché questo porterà a bug inaspettati.

Le richieste di rete possono essere eseguite in componentDidMount.

Spero che sia d'aiuto.

aggiornato l'08 / 03/2019

Il motivo per cui si richiede componentWillMount è probabilmente perché si desidera inizializzare lo stato prima del rendering.

Fallo solo in useState.

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

o forse si desidera eseguire una funzione in componentWillMount, ad esempio, se il codice originale è simile al seguente:

componentWillMount(){
  console.log('componentWillMount')
}

con hook, tutto ciò che devi fare è rimuovere il metodo del ciclo di vita:

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

Voglio solo aggiungere qualcosa alla prima risposta su useEffect.

useEffect(()=>{})

useEffect viene eseguito su ogni rendering, è una combinazione di componentDidUpdate, componentDidMount e ComponentWillUnmount.

 useEffect(()=>{},[])

Se aggiungiamo un array vuoto in uso, l'effetto viene eseguito solo quando il componente è montato. È perché useEffect confronterà l'array che gli è stato passato. Quindi non deve essere un array vuoto, può essere un array che non cambia. Ad esempio, può essere [1,2,3] o ['1,2']. useEffect funziona ancora solo quando il componente è montato.

Dipende da te se vuoi che venga eseguito una sola volta o venga eseguito dopo ogni rendering. Non è pericoloso se hai dimenticato di aggiungere un array fintanto che sai cosa stai facendo.

Ho creato un campione per hook. Per favore controlla.

https://codesandbox.io/s/kw6xj153wr

aggiornato il 21/08/2019

È stato un bianco da quando ho scritto la risposta sopra. C'è qualcosa a cui penso che tu debba prestare attenzione. Quando si usa

useEffect(()=>{},[])

Quando reagisce confronta i valori passati all'array [], utilizza Object.is () per confrontare. Se gli passi un oggetto, ad esempio

useEffect(()=>{},[{name:'Tom'}])

Questo è esattamente lo stesso di:

useEffect(()=>{})

Ri-renderizzerà ogni volta perché quando Object.is () confronta un oggetto, confronta il suo riferimento non il valore stesso. È lo stesso del motivo per cui {} === {} restituisce false perché i loro riferimenti sono diversi. Se vuoi ancora confrontare l'oggetto stesso con il riferimento, puoi fare qualcosa del genere:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

useLayoutEffectpotrebbe farlo con un set vuoto di osservatori ( []) se la funzionalità è effettivamente simile acomponentWillMount - verrà eseguita prima che il primo contenuto arrivi al DOM - anche se in realtà ci sono due aggiornamenti ma sono sincroni prima di disegnare sullo schermo.

per esempio:

function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

Il vantaggio rispetto useStatea un inizializzatore / setter o useEffectè se può calcolare un passaggio di rendering, non ci sono veri e propri rendering del DOM che un utente noterà ed è eseguito prima del primo rendering evidente, che non è il caso diuseEffect . Il rovescio della medaglia è ovviamente un leggero ritardo nel tuo primo rendering poiché un controllo / aggiornamento deve avvenire prima di dipingere sullo schermo. Tuttavia, dipende davvero dal tuo caso d'uso.

Penso che personalmente useMemovada bene in alcuni casi di nicchia in cui è necessario fare qualcosa di pesante - purché si tenga presente che è l'eccezione rispetto alla norma.

Questo è il modo in cui simulo il costruttore in componenti funzionali utilizzando l' useRefhook:

function Component(props) {
    const willMount = useRef(true);
    if (willMount.current) {
        console.log('This runs only once before rendering the component.');
        willMount.current = false;        
    }

    return (<h1>Meow world!</h1>);
}

Ecco l'esempio del ciclo di vita:

function RenderLog(props) {
    console.log('Render log: ' + props.children);
    return (<>{props.children}</>);
}

function Component(props) {

    console.log('Body');
    const [count, setCount] = useState(0);
    const willMount = useRef(true);

    if (willMount.current) {
        console.log('First time load (it runs only once)');
        setCount(2);
        willMount.current = false;
    } else {
        console.log('Repeated load');
    }

    useEffect(() => {
        console.log('Component did mount (it runs only once)');
        return () => console.log('Component will unmount');
    }, []);

    useEffect(() => {
        console.log('Component did update');
    });

    useEffect(() => {
        console.log('Component will receive props');
    }, [count]);


    return (
        <>
        <h1>{count}</h1>
        <RenderLog>{count}</RenderLog>
        </>
    );
}

[Log] Body
[Log] First time load (it runs only once)
[Log] Body
[Log] Repeated load
[Log] Render log: 2
[Log] Component did mount (it runs only once)
[Log] Component did update
[Log] Component will receive props

Naturalmente i componenti di classe non hanno Bodypassaggi, non è possibile effettuare una simulazione 1: 1 a causa di diversi concetti di funzioni e classi.

Ho scritto un hook personalizzato che eseguirà una funzione una volta prima del primo rendering.

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

Uso:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

C'è una bella soluzione da implementare componentDidMounte componentWillUnmountcon useEffect.

Sulla base della documentazione, useEffectpuò restituire una funzione di "pulizia". questa funzione non verrà invocata alla prima useEffectchiamata, ma solo alle chiamate successive.

Pertanto, se utilizziamo il useEffecthook senza dipendenze, il hook verrà chiamato solo quando il componente è montato e la funzione "cleanup" viene chiamata quando il componente è smontato.

useEffect(() => {
    console.log('componentDidMount');

    return () => {
        console.log('componentWillUnmount');
    };
}, []);

La chiamata della funzione di ritorno cleanup viene invocata solo quando il componente è smontato.

Spero che questo ti aiuti.

È possibile hackerare il hook useMemo per imitare un evento del ciclo di vita di ComponentWillMount. Basta fare:

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentWillMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

Dovresti tenere il gancio useMemo prima di qualsiasi cosa interagisca con il tuo stato. Questo non è come è previsto, ma ha funzionato per me per tutti i problemi di componentWillMount.

Questo funziona perché useMemo non richiede di restituire effettivamente un valore e non è necessario utilizzarlo come qualcosa, ma poiché memorizza un valore basato su dipendenze che verranno eseguite una sola volta ("[]") e si trova sopra il nostro componente esso viene eseguito una volta quando il componente viene montato prima di qualsiasi altra cosa.

https://reactjs.org/docs/hooks-reference.html#usememo

Ricorda che la funzione passata a useMemo viene eseguita durante il rendering. Non fare nulla lì che normalmente non faresti durante il rendering. Ad esempio, gli effetti collaterali appartengono a useEffect, non useMemo.

La risposta di Ben Carp mi sembra valida solo per me.

Ma dal momento che stiamo usando modi funzionali, solo un altro approccio può trarre vantaggio dalla chiusura e dall'HoC:

const InjectWillmount = function(Node, willMountCallback) {
  let isCalled = true;
  return function() {
    if (isCalled) {
      willMountCallback();
      isCalled = false;
    }
    return Node;
  };
};

Quindi usalo:

const YourNewComponent = InjectWillmount(<YourComponent />, () => {
  console.log("your pre-mount logic here");
});

Breve risposta alla tua domanda originale , come componentWillMountpuò essere usato con React Hooks:

componentWillMountè deprecato e considerato legacy . Reagire raccomandazione :

In generale, si consiglia di utilizzare il costruttore () invece per inizializzare lo stato.

Ora nelle FAQ di Hook scopri quale è l'equivalente di un costruttore di classi per i componenti di funzione:

costruttore: i componenti di funzione non hanno bisogno di un costruttore. È possibile inizializzare lo stato nella chiamata useState. Se il calcolo dello stato iniziale è costoso, è possibile passare una funzione per utilizzare State.

Quindi un esempio di utilizzo componentWillMountè simile al seguente:

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

Basta semplicemente aggiungere un array di dipendenze vuoto in useEffect funzionerà come componentDidMount.

useEffect(() => {
  // Your code here
  console.log("componentDidMount")
}, []);

C'è un semplice trucco per simulare componentDidMounte componentWillUnmountusando useEffect:

useEffect(() => {
  console.log("componentDidMount");

  return () => {
    console.log("componentWillUnmount");
  };
}, []);