Qual é a diferença entre componentWillMount e componentDidMount no ReactJS?

Eu olhei a documentação do Facebook em ( React.Component ) e ela menciona como componentWillMounté invocado no cliente / servidor enquanto componentDidMounté invocado apenas no cliente. O que componentWillMountfazer com o servidor?

componentWillMount é essencialmente o construtor. Você pode definir propriedades de instância que não afetam a renderização, extrair dados de um armazenamento de forma síncrona e setState com eles, e outro código simples sem efeitos colaterais que você precisa executar ao configurar seu componente.

Raramente é necessário, e nem um pouco com as classes ES6.

o constructormétodo não é o mesmo quecomponentWillMount .

De acordo com o autor de Redux, é arriscado despachar ações do construtor porque pode resultar na mutação do estado durante a renderização.

No entanto, despachar de componentWillMount está ótimo.

do github :

Isso acontece quando dispatch () dentro do construtor de um componente causa um setState () dentro de outro componente. O React rastreia o “proprietário atual” de tais avisos - e pensa que estamos chamando setState () dentro do construtor quando tecnicamente o construtor causa um setState () dentro de alguma outra parte do aplicativo. Não acho que devemos lidar com isso - é apenas React tentando o seu melhor para fazer seu trabalho. A solução é, como você observou corretamente, em vez disso, dispatch () dentro de componentWillMount ().

Para adicionar ao que FakeRainBrigand disse, componentWillMounté chamado ao renderizar o React no servidor e no cliente, mas componentDidMountsó é chamado no cliente.

componentWillMount é feito antes do INICIAL render de um componente e é usado para avaliar props e fazer qualquer lógica extra com base neles (geralmente para atualizar o estado) e, como tal, pode ser executado no servidor para obter a primeira marcação renderizada do lado do servidor .

componentDidMounté executado APÓS a inicial, renderquando o DOM foi atualizado (mas crucialmente ANTES que a atualização do DOM seja pintada no navegador, permitindo que você faça todos os tipos de interações avançadas com o próprio DOM). É claro que isso só pode acontecer no próprio navegador e, portanto, não ocorre como parte do SSR, já que o servidor só pode gerar marcação e não o próprio DOM, isso é feito depois que ele é enviado ao navegador, se estiver usando SSR

Interações avançadas com o DOM que você diz? Whaaaat ?? ... Sim - neste ponto, porque o DOM foi atualizado (mas o usuário não viu a atualização no navegador ainda) é possível interceptar a pintura real na tela usandowindow.requestAnimationFrame e, em seguida, fazer coisas como medir o real Elementos DOM que serão produzidos, para os quais você pode realizar mais mudanças de estado, muito úteis, por exemplo, animar a altura de um elemento que tem conteúdo de comprimento variável desconhecido (já que agora você pode medir o conteúdo e atribuir uma altura à animação), ou para evitar flashes de cenários de conteúdo durante alguma mudança de estado.

Porém, tenha muito cuidado para proteger as mudanças de estado em qualquer uma, componentDid...pois do contrário pode causar um loop infinito porque uma mudança de estado também causará uma re-renderização e, portanto, outra componentDid...e assim por diante.

Conforme a documentação ( https://facebook.github.io/react/docs/react-component.html )

Métodos prefixados com vontade são chamados antes que algo aconteça e

Os métodos prefixados com did são chamados logo depois que algo acontece.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Porém, há um “pegadinho”: uma chamada assíncrona para buscar dados não retornará antes que a renderização aconteça. Isso significa que o componente será renderizado com dados vazios pelo menos uma vez.

Não há como “pausar” a renderização para esperar que os dados cheguem. Você não pode retornar uma promessa de componentWillMount ou disputar em um setTimeout de alguma forma.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

nosso componente não terá acesso à UI nativa (DOM, etc.). Também não teremos acesso aos refs filhos, porque eles ainda não foram criados. O componentWillMount () é uma chance para lidarmos com a configuração, atualizar nosso estado e, em geral, nos prepararmos para a primeira renderização. Isso significa que podemos começar a realizar cálculos ou processos com base nos valores prop.

Caso de uso para o componenteWillMount ()

Por exemplo, se você deseja manter a data de quando o componente foi criado em seu estado de componente, você pode configurar isso neste método. Lembre-se de que definir o estado neste método não renderizará novamente o DOM. É importante ter isso em mente, porque na maioria dos casos, sempre que alteramos o estado do componente, uma nova renderização é disparada.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Caso de uso para o componentDidMount ()

Por exemplo, se você estiver construindo um aplicativo de notícias que busca dados sobre as notícias atuais e os exibe para o usuário, pode querer que esses dados sejam atualizados a cada hora sem que o usuário tenha que atualizar a página.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}