Por que os documentos do React recomendam fazer AJAX em componentDidMount, não em componentWillMount?

102

O título diz tudo. Eu entendo por que componentDidMounté apropriado para qualquer coisa que requer acesso DOM, mas uma solicitação AJAX não necessariamente ou geralmente precisa disso.

O que da?

reactjs

— Alan H.
fonte

@FurkanO Acho que ele quis dizer acesso a elementos DOM renderizados pelo componente. E ele está totalmente certo porque se você tentar acessar os referidos elementos componentWillMountnele falhará, visto que o componente ... não montou.

— ZekeDroid

@AlanH. Excluí minha pergunta, é claro que você tem acesso ao dom no componentDidMount. Esta é uma regra, nada a explicar sobre isso. Obrigado.

— FurkanO

Na minha opinião, o motivo pelo qual chamamos a função Ajax após componentDidMount é que primeiro temos que nos certificar de que o elemento está sendo renderizado sem problemas no início. Depois disso, podemos fazer uma chamada ajax. Se chamarmos ajax primeiro e algo de erro acontecer, isso causará um problema de renderização

— Faris Rayhan

Respostas:

componentDidMounté para efeitos colaterais. Adicionar ouvintes de eventos, AJAX, alterar o DOM, etc.

componentWillMountraramente é útil; especialmente se você se preocupa com a renderização do lado do servidor (adicionar ouvintes de evento causa erros e vazamentos, e muitas outras coisas que podem dar errado).

Fala-se sobre a remoção componentWillMountde componentes de classe, uma vez que serve ao mesmo propósito que o construtor. Ele permanecerá nos createClasscomponentes.

— Brigand
fonte

Adicionar ouvintes de eventos causa erros e vazamentos o tempo todo no servidor ou apenas em componentWillMount? Eu realmente não vejo a diferença.

— Alan H.

@Alan - Se você estiver usando o React tanto no lado do cliente quanto no lado do servidor, verá que tudo dentro dele componentWillMountserá executado em uma renderização do lado do servidor. Se você estivesse usando componentDidMount, isso só seria executado no lado do cliente. Como resultado, colocar coisas componentWillMountque executam interações externas ou vinculam-se a eventos, etc., não é uma boa ideia. Se você não tem planos de renderizar seus componentes no lado do servidor, ainda não é uma boa ideia apenas pela potencial portabilidade do código. Isso tudo está fora do motivo principal de ser ruim, o que é explicado na resposta de @daniula.

— Mike Driver

componentWillMount é executado no servidor, mas componentWillUnmount (onde você remove ouvintes) não é. Isso faria com que você adicionasse ouvintes e nunca os limpasse.

— Brigand

As pessoas da equipe principal do React estão considerando remover o componentWillMount de versões futuras.

— cchamberlain

@AnkitSinghaniya interromperia a renderização do servidor e os testes de unidade rasos.

— Brigand

Tive o mesmo problema no início também. Eu decidi tentar fazer pedidos, componentWillMountmas acabou em vários pequenos problemas.

Eu estava disparando a renderização quando a chamada ajax termina com novos dados. Em algum ponto, a renderização do componente demorou mais do que a obtenção da resposta do servidor e, nesse ponto, o retorno de chamada ajax estava disparando a renderização no componente não montado. Este é um tipo de caso extremo, mas provavelmente há mais, por isso é mais seguro seguir componentDidMount.

— Daniula
fonte

Ok, obrigado. Achei que pudesse ser algo assim, mas você está certo, é surpreendente que a solicitação de ajax pudesse terminar antes da renderização.

— Alan H.

@daniula Tem certeza? Como a solicitação AJAX pode terminar antes de renderizar?

— Leon Grapenthin de

Este é o mundo assíncrono do navegador. Você nunca deve presumir que uma função sempre será mais rápida que as demais. Como mencionei, é um caso extremo e provavelmente significa que você deve otimizar seu processo de renderização, mas usar o método de ciclo de vida adequado tornará sua vida muito mais fácil neste ponto.

— daniula

@SooChengKoh ES6 construtor de classe é equivalente a componentWillMount, então você ainda deve continuar usando componentDidMountpara suas chamadas ajax.

— daniula

@SooChengKoh - Definitivamente não deve fazer nada no construtor que levará ao estado que deve ser configurado, que levará a condições de corrida no cliente e no servidor. Você nunca deve chamar setStateum construtor de componente e não tem como determinar quando a chamada AJAX será concluída. twitter.com/dan_abramov/status/576453138598723585

— cchamberlain

De acordo com a documentação, definir o estado em componentWillMountnão acionará uma nova renderização. Se a chamada AJAX não estiver bloqueando e você retornar um Promiseque atualiza o estado do componente em caso de sucesso, há chances de que a resposta chegue depois que o componente for renderizado. Como componentWillMountnão dispara uma re-renderização, você não terá o comportamento esperado, que é o componente sendo renderizado com os dados solicitados.

Se você usar qualquer uma das bibliotecas de fluxo e os dados solicitados acabarem no armazenamento ao qual o componente está conectado (ou herdar de um componente conectado), isso não será um problema, pois a recepção desses dados, provavelmente, mudará os props eventualmente.

— gabriel.g
fonte

componentWillMountnão dispara uma nova renderização apenas porque um novo estado é definido antes da primeira renderização. Mas se setStatefor chamado em um retorno de chamada AJAX, ele será definitivamente chamado após a primeira renderização e acionará uma nova renderização.

— webdif