React: Anatomia de um componente

4 min readApr 13, 2017

Imagine que você está brincando com LEGO, uma peça pode ser unida a outra formando uma estrutura maior. É exatamente para isso que os componentes existem no React, são peças de código menores que podem ser agrupadas, resultando noutro componente mais complexo.

Os componentes no React possuem uma API simples, estado interno e propriedades que podem ser repassadas para um componente filho. Também implementam um conjunto de métodos de callback que são chamados em determinado momento do seu ciclo de vida. Neste post vamos olhar de perto todos esses pontos.

Estrutura básica

Os componentes no React devem extender de React.Component, começar com letra maiúscula e possuem apenas um método obrigatório, que é o render:

Quando o render é chamado, ele analisa o estado e as propriedades, retornando um único elemento. Esse elemento pode ser a representação de um componente HTML ou a composição de outro componente definido por você. É aqui onde fica a mágica dos componentes: se torna fácil modularizar o código em partes reutilizáveis.

Também é importante saber que o render deve ser uma função pura. Ou seja, ela não altera o estado do componente e sempre retorna o mesmo valor. Falaremos mais sobre funções puras e os side effects em outro post!

Propriedades

As propriedades ajudam a customizar os componentes durante sua criação. No mundo React, as propriedades são para os componentes assim como os atributos são para um elemento HTML.

Veja o trecho de código abaixo:

Para alterar a renderização do componente "Greeting", basta mudarmos o valor da propriedade "name". Sempre que passamos um valor para um atributo num componente React, ele é repassado para a propriedade interna chamada this.props. No exemplo acima, o atributo "name" está acessível internamente através da propriedade this.props.name.

Estado interno

Enquanto as propriedades afetam a inicialização do componente, o estado afeta a renderização desse componente e como ele se comporta durante seu ciclo de vida.

O estado inicial deve ser setado no construtor. Não que isso seja uma regra, mas é uma boa prática por conta do estado ser uma propriedade interna do componente. A principal parte do código acima é o this.setState. Ela seta um novo valor para chave alterada no estado e dispara uma nova renderização do DOM, imprimindo o contador incrementado.

Ciclo de vida

Os componentes no React possuem 3 fases no seu ciclo de vida, são elas: mounting, mounted e unmounting. Alguns métodos de callback são invocados em cada estágio.

Durante a fase de montagem, podemos ter acesso aos seguintes métodos:

componentWillMount: É chamado logo antes do componente ser montado e renderizado. Uma coisa interessante é que o estado setado neste método não provoca uma nova renderização do DOM.

componentDidMount: É acionado logo após o componente ser montado e renderizado. Geralmente os side-effects como a requisição de dados numa API são chamados neste método. Ele também dispara uma nova renderização quando o estado é alterado no seu escopo.

Depois que o componente está montando, podemos utilizar os métodos abaixo :

componentWillReceiveProps: É chamado quando alguma propriedade é alterada após o componente ser montado. Recebe um parâmetro onde é passado o valor das novas propriedades. É muito útil para comparar as propriedades atuais com as novas e acionar mudanças no estado com o this.setState().

shouldComponentUpdate: Por padrão, um componente no React sempre é atualizado após uma mudança no estado, com esse método você pode decidir se o componente será atualizado retornando um valor booleano. Não é chamado na primeira renderização do componente.

componentWillUpdate: É chamado logo após o shouldComponentUpdate retornar true. Não é permitido alterar o estado aqui, deve ser usado com o intuito de se preparar para a atualização que vai acontecer e não acionar uma nova. Não é chamado na renderização inicial.

componentDidUpdate: É invocado imediatamente após uma atualização ocorrer. Geralmente é usado para alterar o DOM quando o componente é atualizado, ou para realizar requisições http em função das novas propriedades e/ou estado. Apesar de ser semelhante ao componentDidMount, não é chamado na primeira renderização do componente.

E quando o componente é destruído, temos acesso a apenas 1 método:

componentWillUnmount: É chamado logo após o componente ser desmontando e destruído, ou seja, quando ele é removido do DOM. Neste método geralmente cancelamos algum processo ou listener que está associado ao componente, evitando memory leaks.

Conclusão

Os componentes no React são a chave para escrever um código bem estruturado e reutilizável. É essencial conhecer como as propriedades, estado e ciclo de vida funcionam para manter sua aplicação performática. Passamos por alguns dos principais pontos, mas ainda temos muita coisa pela frente. Continue acompanhando. Quero compartilhar com vocês muito do que estamos aprendendo no 12minutos!

Algo mais?

Esqueci de alguma coisa? Você não concorda com algo? Encontrou algum erro? O que devo escrever no próximo? Deixe um comentário abaixo. Se você estiver em Belo Horizonte/MG, podemos tomar um café e conversar sobre Javascript e o mundo React! :)

Referências: