freeCodeCamp

3.1 KiB

Raw Blame History

title	localeTitle
Life Cycle Methods Of A Component	Métodos de Ciclo de Vida de um Componente

Métodos de Ciclo de Vida de um Componente

Quando começamos a trabalhar com componentes, precisamos executar várias ações para atualizar o estado ou executar algumas ações quando algo muda nesse componente. Neste cenário, os métodos de ciclo de vida de um componente são úteis !! Então, vamos mergulhar neles neste artigo.

Em termos gerais, podemos dividir os métodos do ciclo de vida em 3 categorias.

Montagem
Atualizando
Desmontando

Como os métodos do ciclo de vida são auto-explicativos, vou mencionar os nomes dos métodos. Por favor, sinta-se à vontade para contribuir com este artigo, se necessário.

Montagem:

uma. constructor()

b. componentWillMount()

c. render()

d. componentDidMount()

Atualizando:

uma. componentWillRecieveProps()

b. shouldComponentUpdate()

c. componentWillUpdate()

d. render()

e. componentDidUpdate()

Desmontando:

uma. componentWillUnmount()

Alguns fatos interessantes para notar:

constructor , componentWillMount , componentDidMount e componentWillUnmount serão chamados apenas uma vez durante o ciclo de vida de um componente.
componentWillUpdate e componentDidUpdate só serão executados se e somente se shouldComponentUpdate retornar true.
componentWillUnmount() será chamado pouco antes de desmontar qualquer componente e, portanto, pode ser usado para liberar a memória usada, fechar quaisquer conexões com o banco de dados, etc.

Muitas coisas podem ser aprendidas mergulhando na codificação. Então, sujem suas mãos codificando.

Nota:

"Os avisos de descontinuação serão ativados com uma versão 16.x futura, mas os ciclos de vida herdados continuarão funcionando até a versão 17. " 1

"Mesmo na versão 17, ainda será possível usá-los, mas eles serão aliados com um prefixo" UNSAFE_ "para indicar que podem causar problemas. Também preparamos um script automatizado para renomeá-los no código existente." 1

Em outras palavras, esses métodos de ciclo de vida previos ainda estarão disponíveis como:

UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate

Novos métodos de ciclo de vida

Novos métodos de ciclo de vida serão introduzidos no React 17

getDerivedStateFromProps será uma alternativa mais segura para componentWillReceiveProps .
getSnapshotBeforeUpdate será adicionado para suportar a leitura segura de propriedades das atualizações do DOM são feitas