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.
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:
Compartilhe isso:
