Ao término desta aula, vocês serão capazes de: • entender o funcionamento do React e React Native; • visualizar como se comportam durante o seu cic...

Ao término desta aula, vocês serão capazes de:
• entender o funcionamento do React e React Native;
• visualizar como se comportam durante o seu ciclo de vida de Renderização.
Olá,
Vamos continuar os nossos estudos da disciplina
Programação para Dispositivos Móveis. Na aula anterior foi
apresentado um breve histórico do React Native, bem como
algumas vantagens de ser utilizado e os casos de uso do mesmo.
Nesta aula, entenderemos melhor o funcionamento e o ciclo de
vida de renderização do React e React Native.
Leia atentamente esta aula e se tiver alguma dúvida, use os
recursos que estão na sua área do aluno.
Bons estudos! 12Programação para Dispositivos Móveis
Seções de estudo
1- Funcionamento do React Native
2- Ciclo de Vida de Renderização
1- Funcionamento do React Native
Na aula anterior, vimos um breve histórico do framework
React Native, também aprendemos como instalar o React
Native e vimos as suas dependências. Além disso, um projeto
foi iniciado utilizando o template em branco da ferramenta
Expo.
Antes de ir para o código do projeto que foi criado é
preciso entender o funcionamento do React Native, pois
somente sabendo como uma tecnologia funciona é que é
possível reproduzir e incrementar sem maiores complicações.
(PINHO e ESCUDELARIO 2020).
A base para do React Native é o React, então para
entender o funcionamento de um é preciso primeiro entender
o do outro, primeiramente é preciso estudar o funcionamento
do Virtual DOM (EISENMAN, 2015).
No React o Virtual DOM é uma camada entre o que
deve ser renderizado na página web e o que o desenvolvedor
codifi cou. No desenvolvimento de interfaces interativas do
usuário em um navegador deve-se modifi car o DOM do
navegador.
O DOM é uma árvore de objetos que o navegador
cria quando uma página é carregada. Na Figura 1 é possível
entender a estrutura dessa árvore que contém todos os
elementos, suas propriedades e a hierarquia que existe entre
eles. Segundo DOM(2020) com essa estrutura criada o
JavaScript pode:
● Modifi car elementos HTML;
● Modifi car atributos dos elementos HTML;
● Modifi car os estilos CSS dos elementos;
● Remover ou inserir elementos HTML;
● Reagir e criar eventos nos elementos HTML.
Figura 1 – Árvore de Objetos - HTML DOM. Fonte: DOM, 2020.
O React então cria o Virtual DOM que é uma
representação mais leve do DOM do navegador, toda vez
que um componente é renderizado na tela, o React atualiza
o Virtual DOM dos componentes já renderizados e procura
por mudanças estruturais. Esse processo é muito rápido, já
que o Virtual DOM é bem leve.
As mudanças então (entrada de um texto em um input,
por exemplo) são modifi cadas somente no Virtual DOM,
que após todas as mudanças necessárias é comparado com
uma versão do DOM do navegador de antes da atualização,
então, é descoberto o que realmente mudou e a atualização é
propagada para o DOM do navegador somente modifi cando
o que realmente sofreu alterações. Por isso, o processo é
extremamente rápido e efi caz.
A Figura 2 demonstra esse processo que renderiza
somente o mínimo necessário. (EISENMAN, 2015).
Figura 2 – Cálculos Realizados no Vitrual DOM.
Fonte: Adaptado de EISENMAN, 2015.
Eisenman (2015) cita ainda que a maioria dos
desenvolvedores acredita que a utilização do Virtual DOM
é importante principalmente na otimização de desempenho.
Mas, não se restringe a isso, já que uma camada de
abstração limpa é criada entre o código do desenvolvedor
e a renderização, abrindo possibilidades interessantes no
desenvolvimento.
Então, o funcionamento do React Native pode ser
comparado com o React na Figura 3. Ao invés de renderizar
para o DOM do navegador, o react Native faz chamadas a
bridge que aciona APIs Objective-C para renderizar os
componentes iOS ou APIS Java para renderizar componentes
Android.
Dessa forma, a otimização de utilização do Virtual DOM
continua, além disso, as chamadas às APIs se diferem de outras
opções de desenvolvimento multiplataforma que renderizam
aplicativos sobre uma interface web simplesmente.
Figura 3 – React pode renderizar para vários dispositivos. Fonte: EISENMAN, 2015.
A bridge é responsável por fornecer uma interface entre
o React Native e a renderização nativa do sistema. Então a dentro de variáveis, chamar funções
dentro de tags, colocar regras CSS em objetos JavaScript. Pode
parecer muita coisa, porém a sintaxe do JSX é bem intuitiva,
principalmente para quem já trabalha com desenvolvimento
web, além de ser capaz de construir componentes completos
com toda a estrutura para o correto funcionamento. (PINHO
e ESCUDELARIO, 2020).
Apesar desse lado nativo, que é executado nativamente
no dispositivo, não consegue entender o JSX. O React Native
então converte os elementos JSX para uma linguagem de
marcação que o sistema nativo consiga entender. Dessa
forma, o dispositivo consegue interpretar o que tem que
ser colocado, onde ele deve ser colocado e com quais
propriedades. (PINHO e ESCUDELARIO, 2020).
Chegamos ao fi nal da segunda aula. Vamos recordar?
Retomando a aula
1- Funcionamento do React Native
Na pr imeira seção foi explicado o funcionamento do
React Native, exemplifi cando o funcionamento de seu pai, o
React, ambos constroem os componentes no Virtual DOM
que fi ca com toda a carga de processamento de mudanças, o
que permite uma otimização quando da utilização dele.
2- Ciclo de Vida de Renderização
Na segunda e última seção foi demonstrado o ciclo de
vida de renderização do React e React Native, foi possível
entender que depois que a página é renderizada e tudo é
colocado em seu devido lugar somente quando uma mudança
ocorre é que o ciclo é retomado. 14Programação para Dispositivos Móveis
CAMARA, R. In: O que você deve saber sobre o
funcionamento do React Native, 2018. Disponível em:
https://tableless.com.br/o-que-voce-deve-saber-sobre-
funcionamento-react-native/. Acesso em: 21 jun. 2020.
DOM. In: The HTML DOM (Document Object
Model), 2020. Disponível em: https://www.w3schools.
com/js/js_htmldom.asp. Acesso em: 21 jun. 2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native
Desenvolvimento de aplicativos mobile com React. Editora Casa do
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building
Native Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt Publishing,
2017.
LEBENSOLD, J. React Native Cookbook: Bringing the
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
Minhas anotações