06-Componentes gráficos

Prévia do material em texto

C
Componentes gráficos
omponentização
 
Ao todo, pelo menos três pilares do React são necessários para
seu domínio e evolução de carreira, sendo o primeiro deles a
Componentização. Tudo, ao utilizar o React, baseia-se em componentes.
Sua arquitetura é pensada em componentes e isso nos permite o
reaproveitamento de código-fonte, dividindo a interface de usuário em
partes independentes.
 
Os componentes podem ser de dois tipos: Functional Components e
Class Components. Conceitualmente, são como funções JavaScript que
aceitam entradas chamadas “props” e retornam elementos React (Botão,
Texto, etc.) que aparecerão na tela.
 
O Componente de exemplo apresentado em aula se encaixa no tipo
Functional Component, pois não é uma classe escrita, mas sim, uma
função JavaScript. Para converter este componente em um Class
Component, basta que seja criada uma classe que estende
React.Component, que ao menos possua um método “render”, que
retorna o que deve aparecer em tela. Estes dois tipos de componentes
possuem estados e propriedades, que serão detalhados posteriormente
neste material.
 
Bibliotecas
 
Além dos componentes de interface de usuário que o React Native já
disponibiliza, é possível utilizar bibliotecas de terceiros para incrementar o
seu projeto ou até os criados por você, desenvolvedor. As bibliotecas
incrementam funcionalidades da sua aplicação, elevando-a para o
próximo nível.
 
De maneira padrão, usando apenas o React Native, temos:
• Basic Components
• View
• Renderiza uma área, agrupando elementos. Semelhante
a “div” do HTML.
• Text
• Renderiza um texto.
• Image
• Renderiza uma imagem.
• TextInput
• Renderiza uma caixa para entrada de dados.
• ScrollView
• Renderiza uma área para deslizar o conteúdo quando
este ultrapassa o tamanho da tela.
• StyleSheet
• Agrupa e define estilo para os componentes.
• User Interface
• Button
• Renderiza um botão.
• Switch 
• Renderiza um botão de liga-desliga.
• List Views
• FlatList
• Renderiza uma lista com componentes de organização.
• SectionList
• Renderiza uma lista com componentes de organização.
• Android-specific
• BackHandler
• Gerenciador do botão “voltar” físico do Android.
• DrawerLayoutAndroid
• Gerenciador do layout de “gaveta” encontrado no Android.
• PermissionsAndroid
• Gerenciador de permissões de recursos do dispositivo no
Android.
• ToastAndroid
• Gerador de mensagens do tipo “Toast” exclusivo do
Android.
• IOS-specific
• ActionSheetIOS
• Gerenciador de ações do iOS, quando uma tela abre
mostrando opções de maneira nativa.
• Outros
• ActivityIndicator
• Indicador de atividade, como tela de carregamento em
espera.
• Alert
• Gerador de mensagens para o usuário para tomada de
decisão.
• Animated
• Gerenciador de animações do React.
• Dimensions
• Gerenciador de dimensões do React, possuindo uma
gama de funções para capturar informações do dispositivo.
• KeyboardAvoidingView
• Componente usado para mover o conteúdo da tela
quando o teclado virtual é acionado.
• Linking
• Componente para integração externa com aplicativos do
dispositivo.
• Modal
• Janela que aparece sob o conteúdo da tela atual do
aplicativo.
• PixelRatio
• Gerenciador que dá acesso à densidade de pixel do
dispositivo e sua escala de fonte.
• RefreshControl
• Controlador que permite realizar uma ação quando o
usuário gesticula arrastando para baixo o componente de
lista, gatilhando o evento onRefresh.
• StatusBar
• Componente para controlar a barra de status do
aplicativo.
 
Propriedade
 
Como segundo pilar para domínio do React, as propriedades (ou objeto
props, conforme demonstrou-se no código-fonte) são informações que
são passadas para um componente como parâmetro. Dessa forma, a
lógica encapsulada no componente será responsável por administrar seus
parâmetros de entrada. Além de definir propriedades para os
componentes, como textos, números e componentes, ainda é possível
enviar um bloco de componentes filhos, acessíveis através da propriedade
children do objeto props.
 
Estado e Imutabilidade
 
Como integrante do terceiro pilar para domínio do React, o estado,
permite que os componentes React possuam atributos, assim como se vê
em classes, e este seja devidamente gerenciado e invoque sua
renderização. Não tão simples quanto declarar uma variável e
simplesmente alterá-la, é necessário utilizar a função useState, disponível
no módulo react.
 
O uso do hook useState está disponível para Functional Components,
recebe como parâmetro um valor inicial e retorna um vetor com dois
valores: o primeiro item com variável em questão que se deseja controlar
e o segundo, o método setter que irá definir o seu valor novo. Neste
momento é muito comum utilizar a desestruturação de arrays.
 
Existem outros hooks que podem ser utilizados da API Hooks, por
exemplo:
 
useEffect
•
Uma função que é executada quando a renderização sofre o
processo de commit na tela do dispositivo, evitando
inconsistências e bugs durante sua fase.
•
Por padrão, os efeitos são executados após cada renderização
concluída, mas você pode optar por dispará-los apenas quando
certos valores forem alterados.
useContext
•
Aceita um objeto de contexto (o valor retornado de
React.createContext) e retorna o valor atual do contexto.
•
O valor de contexto atual é determinado pela prop do componente
<MeuContext.Provider> mais próximo acima do componente de
chamada na árvore.
•
Um componente que chama useContext será sempre renderizado
novamente quando o valor do contexto for alterado.
 
Além dos hooks básicos relacionados, existem outros que podem apoiar o
desenvolvedor na construção de sua aplicação:
 
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
 
Maiores detalhes poderão ser conferidos no endereço da documentação
oficial disponível em: <https://reactjs.org/docs/hooks-reference.html>.
 
Ao utilizar Class Components ao invés de Functional Components, basta
que a classe possua sua variável interna state como objeto para ser
manipulada utilizando o método setState da própria classe, informando a
propriedade do objeto state a ser alterada, bem como seu novo valor:
Por fim, complementando o terceiro e até então último pilar para domínio
do React, o conceito de imutabilidade deve estar claro e ser aplicado no
processo de desenvolvimento: criar uma variável imutável permite que a
referência ao seu valor na memória seja direta e, com isso, não será
necessário tanto processamento.
 
Então, os valores das variáveis não são modificados diretamente.
Recriam-se com um conteúdo novo. Dessa forma, previne a redeclaração
de variáveis ao longo do programa, bem como economiza
processamento.
 
Facilita o uso de threads, onde todos os algoritmos podem acessar os
objetos sem a preocupação de serem mudados no tempo de execução.
Então, o compartilhamento se torna livre, uma vez que são livres de
efeitos colaterais (modificações).
 
 
 
Atividade extra
 
Ler e entender código-fonte são atividades importantes para um
desenvolvedor compreender e buscar inspirações para construir suas
aplicações, bem como aprender. Dessa forma, recomendo a leitura do
repositório de aplicativos que são construídos com React Native
disponível em: <https://github.com/ReactNativeNews/React-Native-Apps>
que podem apoiar no processo de entendimento da disciplina e fomentar
o desenvolvimento open-source.
 
Referência Bibliográfica
 
React Docs. Disponível em: < https://reactjs.org/docs/getting-started.html >
Ir para questão