Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

O método componentWillReceiveProps e o método componentDidMount

Na transcrição:

 Ao clicarmos no link do perfil do Vitor, ele vai pedir o mesmo componente que já está instanciado. 

Qual seria esse componente? Eu acho que é o componente "Timeline", tá certo?

Felizmente, temos outro método no ciclo de vida que podemos declarar na classe que é chamado sempre que você pede um componente novamente, passando um argumento para ele.

Esse componente mencionado acima é o componente "Timeline"?

No código:

carregaFotos(){ 
//...
 fetch(urlPerfil)
    .then(response => response.json())
    .then(fotos => {         
        this.setState({fotos:fotos});
    }); 
}

componentDidMount(){
    this.carregaFotos();
}

componentWillReceiveProps(nextProps){
    if(nextProps.login !== undefined){
        this.login = nextProps.login;
        this.carregaFotos();
    }
}

No código acima, quando o componentWillReceiveProps é chamado, ele pode chamar 'this.carregaFotos();', que tem um setState. Se esse setState é chamado, o método 'render' é chamado logo depois, e depois 'componentDidMount' é chamado, certo?

Porém se 'componentDidMount' é chamado, o 'this.carregaFotos()' é chamado de novo, e retorna mais um setState, (certo?). Isso não gera um looping?

Obrigado.

1 resposta

Fala ai Marcelo, tudo bem? Vamos lá:

Qual seria esse componente? Eu acho que é o componente "Timeline", tá certo?

Isso, exatamente.

Esse componente mencionado acima é o componente "Timeline"?

Sim, ele mesmo.

No código acima, quando o componentWillReceiveProps é chamado, ele pode chamar 'this.carregaFotos();', que tem um setState. Se esse setState é chamado, o método 'render' é chamado logo depois, e depois 'componentDidMount' é chamado, certo?

Certo.

Porém se 'componentDidMount' é chamado, o 'this.carregaFotos()' é chamado de novo, e retorna mais um setState, (certo?). Isso não gera um looping?

Não porque o componentDidMount e componentWillReceiveProps serão chamados em momentos e situações diferentes.

Você geraria um loop infinito caso faça um setState dentro do componentDidUpdate, isso porque o setState vai causar uma atualização do componente e logo o componentDidUpdate será chamado, que novamente irá fazer o setState, etc...

Agora no caso do componentDidMount chamar o setState vai causar uma atualização no componente, mas, não vai chamar o componentWillReceiveProps.

Obs: Nas novas versões do React o ciclo de vida componentWillReceiveProps foi descontinuado.

Espero ter ajudado.