Como usar componentWillMount () nos ganchos de reação?

Nos documentos oficiais do React, ele menciona -

Se você estiver familiarizado com os métodos do ciclo de vida da classe React, considere usar o Hook Effect como componentDidMount, componentDidUpdate e componentWillUnmount combinados.

Minha pergunta é - como podemos usar o componentWillMount()método de ciclo de vida em um gancho?

Você não pode usar qualquer um dos métodos de ciclo de vida existentes ( componentDidMount, componentDidUpdate, componentWillUnmountetc.) em um gancho. Eles só podem ser usados ​​em componentes de classe. E com ganchos você pode usar apenas em componentes funcionais. A linha abaixo vem do documento React:

Se você estiver familiarizado com Reagir métodos de ciclo de vida de classe, você pode pensar em useEffectgancho como componentDidMount, componentDidUpdatee componentWillUnmountcombinado.

A sugestão é que você possa imitar esse método do ciclo de vida do componente de classe em um componente funcional.

O código interno é componentDidMountexecutado uma vez quando o componente está montado. useEffectgancho equivalente para esse comportamento é

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

Observe o segundo parâmetro aqui (matriz vazia). Isso será executado apenas uma vez.

Sem o segundo parâmetro, o useEffectgancho será chamado em todas as renderizações do componente que possam ser perigosas.

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

componentWillUnmounté usado para limpeza (como remover ouvintes de eventos, cancelar o cronômetro etc.). Digamos que você esteja adicionando um ouvinte de evento componentDidMounte removendo-o componentWillUnmountcomo abaixo.

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

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

O equivalente do código acima do gancho será o seguinte

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

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

gancho useComponentDidMount

Na maioria dos casos, useComponentDidMounté a ferramenta a ser usada. Ele será executado apenas uma vez, após a montagem do componente (renderização inicial).

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

useComponentWillMount

É importante observar que nos componentes da classe componentWillMounté considerado legado. Se você precisar que o código seja executado apenas uma vez antes da montagem do componente, você poderá usar o construtor. Mais sobre isso aqui . Como o componente funcional não tem o equivalente de um construtor, usar um gancho para executar o código apenas uma vez antes da montagem do componente pode fazer sentido em certos casos. Você pode conseguir isso com um gancho personalizado.

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

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

  willMount.current = false;
};

No entanto, existe uma armadilha. Não use-o para definir seu estado de forma assíncrona (ex., Após uma solicitação do servidor. Como você pode esperar, isso afeta a renderização inicial, o que não ocorrerá). Tais casos devem ser tratados com useComponentDidMount.

Demo

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

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

Demonstração completa

De acordo com reactjs.org, componentWillMount não será suportado no futuro. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

Não há necessidade de usar componentWillMount.

Se você quiser fazer algo antes da montagem do componente, faça-o no construtor ().

Se você deseja fazer solicitações de rede, não faça em componentWillMount. É porque isso levará a erros inesperados.

Solicitações de rede podem ser feitas em componentDidMount.

Espero que ajude.

atualizado em 03/03/2019

O motivo pelo qual você solicita componentWillMount é provavelmente porque deseja inicializar o estado antes da renderização.

Basta fazê-lo em useState.

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

ou talvez Você queira executar uma função no componentWillMount, por exemplo, se o seu código original estiver assim:

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

com hook, tudo que você precisa fazer é remover o método do ciclo de vida:

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

Eu só quero adicionar algo à primeira resposta sobre useEffect.

useEffect(()=>{})

useEffect é executado em cada renderização, é uma combinação de componentDidUpdate, componentDidMount e ComponentWillUnmount.

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

Se adicionarmos uma matriz vazia em useEffect, ela será executada exatamente quando o componente estiver montado. É porque useEffect irá comparar a matriz que você passou para ela. Portanto, ele não precisa ser um array vazio. Pode ser um array que não está sendo alterado. Por exemplo, pode ser [1,2,3] ou ['1,2']. useEffect ainda é executado somente quando o componente é montado.

Depende de você se você deseja executar apenas uma vez ou após cada renderização. Não é perigoso se você esqueceu de adicionar uma matriz, desde que saiba o que está fazendo.

Eu criei uma amostra para gancho. Por favor, confira.

https://codesandbox.io/s/kw6xj153wr

atualizado em 21/08/2019

Está branco desde que escrevi a resposta acima. Acho que há algo que você precisa prestar atenção. Quando você usa

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

Quando reagir compara os valores que você passou para a matriz [], ela usa Object.is () para comparar. Se você passar um objeto para ele, como

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

É exatamente o mesmo que:

useEffect(()=>{})

Ele será renderizado novamente sempre que, quando Object.is () compara um objeto, compara sua referência e não o valor em si. É o mesmo porque {} === {} retorna false porque suas referências são diferentes. Se você ainda deseja comparar o objeto em si, não a referência, pode fazer algo assim:

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

useLayoutEffectpoderia fazer isso com um conjunto vazio de observadores ( []) se a funcionalidade for realmente semelhante a componentWillMount- ela será executada antes que o primeiro conteúdo chegue ao DOM - embora existam duas atualizações, mas elas sejam síncronas antes de serem exibidas na tela.

por exemplo:

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

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

O benefício finalizado useStatecom um inicializador / setter ou, useEffectembora possa computar um passe de renderização, não há renderizações reais no DOM que um usuário notará e é executado antes da primeira renderização perceptível, o que não é o caso de useEffect. A desvantagem é, obviamente, um pequeno atraso na sua primeira renderização, uma vez que uma verificação / atualização deve ocorrer antes da pintura na tela. Realmente depende do seu caso de uso.

Eu acho que pessoalmente, useMemoé bom em alguns casos de nicho em que você precisa fazer algo pesado - desde que você tenha em mente que é a exceção versus a norma.

Esta é a maneira como eu simulo o construtor em componentes funcionais usando o useRefgancho:

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

Aqui está o exemplo do ciclo de vida:

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

É claro que os componentes da classe não possuem Bodyetapas, não é possível fazer uma simulação 1: 1 devido a diferentes conceitos de funções e classes.

Eu escrevi um gancho personalizado que executará uma função uma vez antes da primeira renderização.

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

Há uma boa solução alternativa para implementar componentDidMounte componentWillUnmountcom useEffect.

Com base na documentação, useEffectpode retornar uma função "limpeza". essa função não será chamada na primeira useEffectchamada, apenas nas chamadas subseqüentes.

Portanto, se usarmos o useEffectgancho sem nenhuma dependência, o gancho será chamado apenas quando o componente estiver montado e a função "limpeza" será chamada quando o componente estiver desmontado.

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

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

A chamada da função de retorno de limpeza é chamada apenas quando o componente é desmontado.

Espero que isto ajude.

Você pode hackear o gancho useMemo para imitar um evento do ciclo de vida componentWillMount. Apenas faça:

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

Você precisaria manter o gancho useMemo antes de qualquer coisa que interaja com seu estado. Não é assim que se destina, mas funcionou para mim em todos os problemas do componentWillMount.

Isso funciona porque o useMemo não precisa realmente retornar um valor e você não precisa usá-lo como nada, mas como ele memoriza um valor com base nas dependências que serão executadas apenas uma vez ("[]") e estão no topo de nosso componente, é executado uma vez quando o componente é montado antes de qualquer outra coisa.

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

Lembre-se de que a função passada para useMemo é executada durante a renderização. Não faça nada que normalmente não faria durante a renderização. Por exemplo, os efeitos colaterais pertencem a useEffect, não useMemo.

A resposta de Ben Carp parece ser apenas uma válida para mim.

Porém, como estamos usando maneiras funcionais, apenas outra abordagem pode se beneficiar do fechamento e do HoC:

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

Então use-o:

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

Resposta curta à sua pergunta original , como componentWillMountpode ser usada com os ganchos de reação:

componentWillMountfoi descontinuado e considerado legado . Reagir recomendação :

Geralmente, recomendamos o uso do construtor () para inicializar o estado.

Agora, nas Perguntas frequentes sobre o Hook, você descobre qual é o equivalente a um construtor de classe para componentes de função:

construtor: Os componentes da função não precisam de um construtor. Você pode inicializar o estado na chamada useState. Se a computação do estado inicial for cara, você pode passar uma função para useState.

Portanto, um exemplo de uso se componentWillMountparece com isso:

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

Simplesmente adicione um array de dependência vazio em useEffect, ele funcionará como componentDidMount.

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

Há um truque simples para simular o componentDidMounte componentWillUnmountusando useEffect:

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

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