Jak używać componentWillMount () w React hookach?

W oficjalnych dokumentach React wspomina:

Jeśli znasz metody cyklu życia klasy React, możesz pomyśleć o hooku useEffect jako połączeniu componentDidMount, componentDidUpdate i componentWillUnmount.

Moje pytanie brzmi - jak możemy wykorzystać componentWillMount()metodę cyklu życia w hooku?

Nie można używać żadnego z istniejących metod cyklu życia ( componentDidMount, componentDidUpdate, componentWillUnmountitd) w haku. Mogą być używane tylko w komponentach klasy. A z hakami można używać tylko w elementach funkcjonalnych. Poniższy wiersz pochodzi z dokumentu React:

Jeśli jesteś zaznajomiony z React metod klasy cyklu życia, można myśleć useEffectHook jak componentDidMount, componentDidUpdatei componentWillUnmountłączone.

Sugeruje to, że możesz naśladować tę metodę cyklu życia z komponentu klasy w komponentach funkcjonalnych.

Kod wewnątrz jest componentDidMounturuchamiany raz po zamontowaniu komponentu. useEffectodpowiednikiem haka dla tego zachowania jest

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

Zwróć uwagę na drugi parametr (pusta tablica). To będzie działać tylko raz.

Bez drugiego parametruuseEffect hak zostanie wywołana na każdy render składnika, które mogą być niebezpieczne.

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

componentWillUnmountsłuży do czyszczenia (np. usuwanie detektorów zdarzeń, anulowanie licznika czasu itp.). Załóżmy, że dodajesz odbiornik zdarzeń componentDidMounti usuwasz go, componentWillUnmountjak poniżej.

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

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

Hook odpowiednik powyższego kodu będzie następujący

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

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

useComponentDidMount hook

W większości przypadków useComponentDidMountjest to narzędzie, którego należy użyć. Uruchomi się tylko raz, po zamontowaniu komponentu (wstępnym renderowaniu).

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

useComponentWillMount

Należy zauważyć, że w klasach komponenty componentWillMountsą uważane za starsze. Jeśli chcesz, aby kod działał tylko raz przed zamontowaniem komponentu, możesz użyć konstruktora. Więcej o tym tutaj . Ponieważ komponent funkcjonalny nie ma odpowiednika konstruktora, użycie haka do uruchomienia kodu tylko raz przed zamontowaniem komponentu może mieć sens w niektórych przypadkach. Możesz to osiągnąć dzięki niestandardowemu haczykowi.

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

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

  willMount.current = false;
};

Istnieje jednak pułapka. Nie używaj go do asynchronicznego ustawiania swojego stanu (np. Po żądaniu serwera. Jak można się spodziewać, wpłynie to na początkowe renderowanie, którego nie będzie). W takich przypadkach należy się zająć useComponentDidMount.

Próbny

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

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

Pełne demo

Jak podaje reactjs.org, w przyszłości składnik componentWillMount nie będzie obsługiwany. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Nie ma potrzeby używania elementu componentWillMount.

Jeśli chcesz coś zrobić przed zamontowaniem komponentu, po prostu zrób to w konstruktorze ().

Jeśli chcesz wykonywać żądania sieciowe, nie rób tego w componentWillMount. Dzieje się tak, ponieważ spowoduje to nieoczekiwane błędy.

Żądania sieciowe można wykonać w module componentDidMount.

Mam nadzieję, że to pomoże.

zaktualizowano 08.03.2019 r

Powodem, dla którego pytasz o componentWillMount, jest prawdopodobnie to, że chcesz zainicjować stan przed renderowaniem.

Po prostu zrób to w useState.

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

a może chcesz uruchomić funkcję w componentWillMount, na przykład, jeśli twój oryginalny kod wygląda tak:

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

z hakiem wszystko, co musisz zrobić, to usunąć metodę cyklu życia:

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

Chcę tylko dodać coś do pierwszej odpowiedzi na temat useEffect.

useEffect(()=>{})

useEffect działa na każdym renderowaniu, jest połączeniem składników componentDidUpdate, componentDidMount i ComponentWillUnmount.

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

Jeśli dodamy pustą tablicę w useEffect, będzie ona działać tylko wtedy, gdy komponent zostanie zamontowany. Dzieje się tak, ponieważ useEffect porówna przekazaną do niego tablicę. Więc nie musi to być pusta tablica, może to być tablica, która się nie zmienia. Na przykład może to być [1,2,3] lub ['1,2']. useEffect nadal działa tylko po zamontowaniu komponentu.

To zależy od Ciebie, czy chcesz, aby był uruchamiany tylko raz, czy po każdym renderowaniu. Nie jest niebezpieczne, jeśli zapomnisz dodać tablicę, o ile wiesz, co robisz.

Stworzyłem próbkę do haka. Proszę sprawdź to.

https://codesandbox.io/s/kw6xj153wr

aktualizacja 21.08.2019 r

Odkąd napisałem powyższą odpowiedź była biała. Myślę, że jest coś, na co musisz zwrócić uwagę. Kiedy używasz

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

Kiedy reakcja porównuje wartości przekazane do tablicy [], używa Object.is () do porównania. Jeśli przekażesz mu obiekt, taki jak

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

To jest dokładnie to samo, co:

useEffect(()=>{})

Wyrenderuje się ponownie za każdym razem, ponieważ gdy Object.is () porównuje obiekt, porównuje jego odwołanie, a nie samą wartość. To jest to samo, dlaczego {} === {} zwraca fałsz, ponieważ ich odwołania są różne. Jeśli nadal chcesz porównać sam obiekt, a nie odniesienie, możesz zrobić coś takiego:

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

useLayoutEffectmożna to osiągnąć z pustym zestawem obserwatorów ( []), jeśli funkcjonalność jest w rzeczywistości podobna do componentWillMount- będzie działać, zanim pierwsza treść dotrze do DOM - chociaż faktycznie są dwie aktualizacje, ale są one synchroniczne przed rysowaniem na ekranie.

na przykład:

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

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

Korzyść w porównaniu useStatez inicjatorem / ustawiaczem lub useEffectpolega na tym, że może obliczyć przepustkę renderowania, nie ma rzeczywistych ponownych renderów do DOM, które użytkownik zauważy, i jest uruchamiany przed pierwszym zauważalnym renderowaniem, co nie ma miejsca w przypadku useEffect. Wadą jest oczywiście niewielkie opóźnienie w pierwszym renderowaniu, ponieważ przed malowaniem na ekran musi nastąpić sprawdzenie / aktualizacja. Jednak to naprawdę zależy od twojego przypadku użycia.

Osobiście uważam, że useMemojest w porządku w niektórych niszowych przypadkach, w których musisz zrobić coś ciężkiego - o ile pamiętasz, że jest to wyjątek od normy.

Oto sposób, w jaki symuluję konstruktora w komponentach funkcjonalnych za pomocą useRefhooka:

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

Oto przykład cyklu życia:

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

Oczywiście komponenty klas nie mają Bodykroków, nie jest możliwe wykonanie symulacji 1: 1 ze względu na różne koncepcje funkcji i klas.

Napisałem niestandardowy punkt zaczepienia, który uruchomi funkcję raz przed pierwszym renderowaniem.

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

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

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

  if (!hasRendered) {
    fun()
  }
}

Stosowanie:

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


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

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

Jest ładny obejście do wdrożenia componentDidMounti componentWillUnmountz useEffect.

Na podstawie dokumentacji useEffectmoże zwrócić funkcję „czyszczenia”. ta funkcja nie będzie wywoływana przy pierwszym useEffectwywołaniu, tylko przy kolejnych.

Dlatego jeśli użyjemy useEffectzaczepu bez żadnych zależności, zaczep zostanie wywołany tylko wtedy, gdy komponent jest zamontowany, a funkcja "czyszczenia" jest wywoływana, gdy komponent jest odmontowywany.

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

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

Wywołanie funkcji powrotu oczyszczania jest wywoływane tylko wtedy, gdy komponent jest odmontowany.

Mam nadzieję że to pomoże.

Możesz zhakować hak useMemo, aby naśladować zdarzenie cyklu życia componentWillMount. Po prostu zrób:

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

Musiałbyś zachować punkt zaczepienia useMemo, zanim cokolwiek wchodzi w interakcję z twoim stanem. Nie jest to zamierzone, ale działało w przypadku wszystkich problemów z komponentem WillMount.

To działa, ponieważ useMemo nie wymaga zwracania wartości i nie musisz jej używać jako czegokolwiek, ale ponieważ zapamiętuje wartość na podstawie zależności, które będą uruchamiane tylko raz ("[]") i są na wierzchu naszego komponentu uruchamia się raz, gdy komponent zostanie zamontowany przed czymkolwiek innym.

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

Pamiętaj, że funkcja przekazana do useMemo działa podczas renderowania. Nie rób tam niczego, czego normalnie nie zrobiłbyś podczas renderowania. Na przykład efekty uboczne należą do useEffect, a nie useMemo.

Odpowiedź Bena Karpa wydaje mi się jedyną słuszną.

Ale ponieważ używamy funkcjonalnych sposobów, tylko inne podejście może przynieść korzyści z zamknięcia i HoC:

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

Następnie użyj go:

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

Krótka odpowiedź na Twoje pierwotne pytanie, w jaki sposób componentWillMountmożna ich używać z hakami React:

componentWillMountjest przestarzała i uważane dziedzictwo . Reaguj rekomendację :

Generalnie zamiast tego do inicjalizacji stanu zalecamy użycie konstruktora ().

Teraz w Hook FAQ dowiesz się, jaki jest odpowiednik konstruktora klasy dla komponentów funkcji:

konstruktor: komponenty funkcji nie potrzebują konstruktora. Stan można zainicjować w wywołaniu useState. Jeśli obliczenie stanu początkowego jest kosztowne, możesz przekazać funkcję do useState.

Tak więc przykład użycia componentWillMountwygląda następująco:

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

Po prostu dodaj pustą tablicę zależności w useEffect, będzie działać jak componentDidMount.

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

Jest prosta sztuczka, aby zasymulować componentDidMounti componentWillUnmountużywając useEffect:

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

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