08 jun 2016

React e seu ciclo de vida

Para iniciar este post e entrarmos no contexto geral sobre o ReactJS, essa biblioteca se consolidou na comunidade Front-end, mas não se engane ao achar que o ReactJS é um framework.


Assim como o jQuery se consolidou ao manipular o DOM de uma maneira fácil, o ReactJS abstrai a manipulação do DOM, e possui uma API bem completa para desenvolvimento de interfaces.
E ambos trabalham com outros frameworks.

O ReactJS é usado como o V do MVC, então é fácil utilizá-lo com outros frameworks.
Em um trabalho recente, utilizamos o ReactJS para criarmos componentes para usarmos nos projetos em AngularJS e até BackboneJS.

Qual é o ganho?

Mas por que ReactJS ao invés de diretivas no AngularJS? O ReactJS é bem performático, não há dúvidas. Não que o AngularJS (bem estruturado) também não seja, mas manipulação do DOM com jQuery, na maioria dos casos, sofre em grandes quantidades de informação.

CTA-ebook-transformação-digital

Mas o principal fator é, não nos atrelarmos a frameworks. Ok, mas o ReactJS também não é algo similar? Sim, é, mas ele trabalha com outras tecnologias!

Por ser isomórfico, reescrevemos nossos componentes em ReactJS com as atualizações de suas respectivas bibliotecas, e com a ajuda do Webpack, todos separados em módulos, bibliotecas imutáveis, e voilà, alcançamos nosso objetivo.
A manutenção dos componentes se tornaram simples e prático.

Simplicidade

Um componente em ReactJS tem que expressar como ele deve funcionar em qualquer momento, e o React se encarregará de gerenciar as alterações de interface

Construção de componentes compostos

A idéia é construir componentes reusáveis, independente de contextos. Cada componente deve cumprir seu propósito para compor o todo.

Componentes são como State Machines

Com React, você atualiza os estados(states) do componente, e o React se encarrega de renderizar uma nova interface baseado na mudança do estado.

Props vs States

Propriedades (props) são dados imutáveis dos componentes, ou seja, utilizados para a renderização inicial de um componente.

Estados (states) são os dados que irão determinar o comportamento de seu componente, ou seja, os dados mutáveis.

Especificações de um componente

Um componente possui métodos que sua especificação, sendo eles:

render() : ele é obrigatório, e é executado ao montar o componente
getInitialState() : é chamado uma vez antes de ser montado, e é usado como valor inicial de um estado.
getDefaultProps() : ele é chamado e armazenado quando o componente é criado. O mapeamento dele é guardado em this.props
propTypes() : ele permite validar as propriedades passadas para seu componente, por exemplo, evitar passar uma function() em uma propriedade que espera um Object.

Métodos de Ciclo de vida

Os métodos a seguir são executados em pontos específicos do ciclo de vida do componente.

componentWillMount() : chamado uma vez, antes da renderização inicial. Se chamar setState() dentro do método, o render() irá usar o estado atualizado e executar uma vez.
componentDidMount() : é chamado uma vez, após a renderização do componente, se você utilizar o ReactJS com outros frameworks, o uso de requests ou timers devem ser utilizado neste método. Observação: este método em componentes filhos, são sempre chamados primeiro.
componentWillReceiveProps() : é chamado quando um componente recebe uma nova propriedade, e não é chamado na renderização inicial. Usasse este método para prever ações a serem tomadas antes do render() ser chamado ao atualizar o setState(). Usar setState() dentro deste método, não irá executar o render() novamente.
shouldComponentUpdate() : é chamado antes de renderizar quando novas props ou states serem recebidas. Este método é utilizado para validar se o o componente precisa ou não ser atualizado, retornando um resultado boolean.
componentWillUpdate() : é chamado antes de renderizar quando novas props ou states serem recebidas. Este método é usado para preparar os dados antes da renderização.
componentDidUpdate() : é chamado quando a atualização do componente manipula o DOM. Este método é usado para manipular o DOM após a renderização.
componentWillMount() : é chamado logo quando o componente é desmontado do DOM. Este método é usado para a limpeza de listeners, timers ou elementos criados no componentDidMount().

Concluindo

De modo geral, o ReactJS trabalha desta maneira e obviamente, ele possui muitos outros detalhes que não foram abordados neste post.
Ele possui uma forma declarativa, então, até nosso jeito de programar acaba sendo organizado e bem intuitivo.

Espero que tenham gostado e até a próxima!

Fontes:

https://facebook.github.io/react

Comments

  • Maurilio Atila
    Janeiro 21, 2017 Responder

    O ultimo médoto não seria componentWillUnmount

  • Wesley Martins Alves da Costa
    Maio 9, 2017 Responder

    Rafael,

    Gostei do post, estou trabalhando com o React também.
    Estou gostando muito, mas aqui mesmo a gente tem que utilizar muita coisa do Redux, manipular o state na mão é muito trabalhoso.
    Outra coisa, o Angular 2 está bem estruturado e sem o To Way Databind, está bem próximo ao React. Diretivas também ficaram muito boas com o @INPUT e o @OUTPUT.
    De todo modo estou gostando muito do React, mas ainda voto no Angular 2 ou até mesmo no 4., onde utiliza-se muito mais do TypeScript.

Leave a Comment