aula2 (1)

Prévia do material em texto

2ºAula
React Native II
Objetivos de aprendizagem
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 
13
marcação que é utilizada para criar uma <View> no código 
da Figura 3 vai ser traduzida para se adequar a plataforma que 
ela será renderizada, pode se tornar nesse caso um UIView do 
iOS e Android.view do Android. (EISENMAN, 2015).
Vale ressaltar que toda interação que acontecerá através 
da bridge será iniciada pelo lado nativo, já que os eventos 
(toque na tela, por exemplo) são tratados primeiramente na 
parte nativa da aplicação. (PINHO e ESCUDELARIO, 
2020).
Camara (2018) explica que as vantagens da bridge 
serão sempre usufruídas, visto que ela é a chave para o 
funcionamento da aplicação no React Native.
Dessa forma, é possível entender que o React Native 
não funciona apenas com o JavaScript, ele possuí também o 
lado nativo já que os projetos nele criado rodam diretamente 
no dispositivo do usuário. Portanto, na arquitetura dos 
dispositivos Android terá o Android Runtime: para rodar 
o código Java e no dispositivo iOS terá o Native Runtime: 
para rodar códigos Objective-C/Swift. Além disso, em ambas 
arquiteturas haverá o JSCore virtual machine, que é destinada 
ao código em JavaScript.
Outro ponto importante a se destacar é que em uma 
aplicação React Native três threads são executadas (além das 
que são executadas em background por aplicações nativas) 
Figura 4. 
Figura 4 –Threads React Native. Fonte: CAMARA, 2018.
A primeira é a Main Thread, que também é utilizada 
por aplicações nativas. Ela trata, além das requisições 
relacionadas com a renderização de elementos na tela, os 
gestos reproduzidos pelo usuário.
A segunda é responsável exclusivamente por executar o 
código JavaScript, portanto responsável pela lógica de negócio 
da aplicação e defi nir a estrutura e funcionalidade da interface 
com o usuário.
E a terceira é a Shadow Queue responsável por realizar 
os cálculos referentes ao layout.
2- Ciclo de Vida de Renderização
O ciclo de vida da renderização do React Native é o 
mesmo do React (Figura 5). No React o ciclo começa quando 
a página é renderizada e o componente é montado no DOM 
e posteriormente ele é renderizado. Depois que isso acontece 
o React fi ca aguardando mudanças no State/props que 
resulta no cálculo da diferença com o Virtual DOM seguido 
da renderização do componente com o React (EISENMAN, 
2015).
A diferença entre o React Native e React quanto o ciclo 
de vida é que o primeiro depende da bridge para renderizar os 
componentes, todo o resto é igual.
Figura 5 – Ciclo de Vida renderização React. Fonte: EISENMAN, 2015.
Tanto React quanto React Native tem sua interface 
gráfi ca desenvolvida em JSX, que veremos mais afundo na 
próxima aula, ela é uma extensão da sintaxe do JavaScript que 
parece muito com HTML/XML. No JSX em uma mesma 
estrutura é possível escrever HTML, CSS e JavaScript. 
Pode-se inserir tags 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 funcionamentodo 
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