É muito comum encontrarmos bastante conteúdo sobre utilização de props e states no React Native, mas em sua maioria, o material trás exemplos com situações bem mais avançadas.
Mas é bem escasso um material abordando situações mais básicas que ajudam a aplicar e relembrar o básico, só que nas versões mais recentes do React Native.
Então iremos vai falar um pouco aqui sobre:
- Props.
- States.
- Hooks.
- Hooks Personalizados.
Com exemplos bem básicos para você entender, fixar bem e ficar preparado para conteúdos mais avançados. Então acompanhe com agente nesta vídeo aula e no artigo:
Índice
Considerações Iniciais
No nosso exemplo iremos utilizar um contador básico que vai exibir um número e um botão para incrementar esse número.
React Native Props
As Props em React Native, são as propriedades que podemos passar de um componente para outro podendo ser utilizada internamente, seja para exibir ou aplicar alguma lógica própria do componente.
Por exemplo, imagine que temos um componente chamado
Counter
que simplesmente retorna uma
<View>
com um
<Text>
exibindo um número:
import React from "react";
import { View, Text } from "react-native";
const Counter = () => {
return (
<View>
<Text>0</Text>
</View>
);
};
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
Agora se quisermos exibir um número diferente no componente Counter mas sem precisar alterar manualmente o número zero, temos que recorrer as Props:
import React from "react";
import { View, Text } from "react-native";
const Counter = ({ value }) => {
return (
<View>
<Text>{value}</Text>
</View>
);
};
const App = () => {
return (
<View>
<Counter value={1} />
</View>
);
};
export default App;
Percebeu que as Props são recebidas no componente como se fossem propriedades de um método, seria mais ou menos como se estivéssemos fazendo isso:
function counter(value) {
return "<h1>" + value + "</h1>";
}
//counter(1)
// -> <h1>1</h1>
E são passadas através da utilização do componente, como podemos ver:
<Counter value={1} />
podemos verificar que:
-
value
= o nome da propriedade que poderemos acessar no componenteCounter
. -
1
= o valor da propriedade.
Então para resumir a utilização das Props, são basicamente variáveis que podemos passar para os nossos componentes, determinando um nome e um valor como vimos acima e que irão ser recebidas por eles como se fossem propriedades de função.
React Native States
Os States são valores que utilizamos em nossos componentes
React
que causam o efeito de renderização instantânea toda vez que o valor do State for alterado, isso da o efeito dinâmico e reativo para nossas aplicações.
Devemos ter em mente que os States são valores que não podemos trabalhar através de atribuições normais como, declarar uma variável e alterar o seu valor, por exemplo:
let value = 10;
value = 12;
Para fazermos algo semelhante com os States precisamos ter essa variável declarada no State do componente e ter uma função própria para alterar o valor.
Nas versões anteriores a 16.8 do React, para utilizar o State em um componente, precisávamos declarar os componentes em formato de classe, por exemplo:
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class Counter extends Component {
state = {
counter: 0,
};
render() {
return (
<View>
<Text> {this.state.counter} </Text>
</View>
);
}
}
E se quisermos alterar o valor do State, precisamos utilizar o setState veja um exemplo:
import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';
class Counter extends Component {
state = {
counter: 0,
};
render() {
return (
<View>
<Text> {this.state.counter} </Text>
<Button
title="Clique Aqui"
onPress={() => {
this.setState({counter: this.state.counter + 1});
}}
/>
</View>
);
}
}
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
É por isso que nas versões mais recentes do React Native, introduziram o Hook
useState
, que facilita bastante nossa vida quando precisamos declarar uma variável no State do componente, podemos utilizar os componentes no formato de função e ainda assim ter um State, veja, vamos declarar a variável counter:
import React, { useState } from "react";
import { View, Text } from "react-native";
const Counter = () => {
const [counter, setCounter] = useState(0);
return (
<View>
<Text>{counter}</Text>
</View>
);
};
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
O
useState
é um hook que agente importa da biblioteca
React
e serve para podermos utilizar e manipular os States do componente.
Basicamente, para utilizá-lo, devemos declarar pensando nessa estrutura
const [variavel, setVariavel] = useState(valorInicial)
, para nosso exemplo então:
const [counter, setCounter] = useState(0);
Onde:
-
counter
= nome da variável. -
setCounter
= função para alterar o valor da variável. -
0
= valor inicial da variável.
E como utilizar o
setCounter
para alterarmos o valor da variável
counter
? Vejamos um exemplo de como utilizar nesse nosso caso:
import React, { useState } from "react";
import { View, Text, Button } from "react-native";
const Counter = () => {
const [counter, setCounter] = useState(0);
return (
<View>
<Text>{counter}</Text>
<Button title="clique aqui" onPress={() => setCounter(1)} />
</View>
);
};
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
Explicando… Aqui, adicionamos um componente
Button
e colocamos no método
onPress
dele a chamada para o
setCounter
passando o valor 1.
Ao clicar nesse botão, nossa variável
counter
que foi iniciada com o valor
0
será modificada com o valor passado no
setCounter(1)
e irá renderizar novamente nosso componente
Counter
mostrando na tela o valor
1
.
E se eu quiser agora realmente dar o efeito de um contador ao clicar no botão?
Basta alterar o valor de
counter
passado no método
setCounter(1)
para
setCounter(counter + 1)
, ou seja, toda vez que eu clicar no botão o valor de
counter
vai ser atualizado para o valor de
counter + 1
.
Fica assim então:
import React, { useState } from "react";
import { View, Text, Button } from "react-native";
const Counter = () => {
const [counter, setCounter] = useState(0);
return (
<View>
<Text>{counter}</Text>
<Button title="clique aqui" onPress={() => setCounter(counter + 1)} />
</View>
);
};
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
Viu como é bem fácil utilizar os
state
com o Hook
useState
? 🙂
Hooks Personalizados
Como pudemos ver, os
Hooks
são forma mais recente de se trabalhar com os
states
(e támbem outros recursos do
React
).
No nosso exemplo até agora, trabalhamos apenas com um
Hook
fornecido pela api do
React
, o
useState
.
Mas será que é possível criar nossos próprios
Hooks Personalizados
? Sim! Vejamos como:
const useCounter = () => {
const [value, setValue] = useState(0);
return [value, setValue];
};
Por padrão, os
Hooks
devem utilizar sempre o prefixo
use
.
No nosso exemplo criamos um Hook chamado
useCounter
que abstraímos do nosso componente
Counter
.
Perceba que o retorno dele é
[value, setValue]
, ou seja nosso
Hook personalizado
deve retornar um valor e uma função para alterar esse valor para que possamos utilizar nos nossos componentes.
Mas para que fazer essa abstração de criar um
Hook
personalizado se já estava tudo funcionando normalmente somente com o
useState
?
Bom, a vantagem é poder isolar a lógica do Hook em um lugar diferente e permitir sua reutilização em outros componentes.
Esta técnica é chamada de LogicHooks, que são Hooks que armazenam lógicas de uma aplicação tornando-as isoladas e também reutilizáveis.
Vamos incrementar o nosso
Hook
personalizado colocando nele a função
setCounter
abstraindo do nosso método
onPress
do
Button
.
const useCounter = () => {
const [value, setValue] = useState(0);
const setCounter = () => {
setValue(value + 1);
};
return [value, setCounter];
};
Dessa forma podemos tirar a preocupação de criar uma função contadora nos nossos componentes e utilizar o nosso
Hook
useCounter
para isso:
import React, { useState } from "react";
import { View, Text, Button } from "react-native";
const useCounter = () => {
const [value, setValue] = useState(0);
const setCounter = () => {
setValue(value + 1);
};
return [value, setCounter];
};
const Counter = () => {
const [counter, setCounter] = useCounter(0);
return (
<View>
<Text>{counter}</Text>
<Button title="clique aqui" onPress={() => setCounter()} />
</View>
);
};
const App = () => {
return (
<View>
<Counter />
</View>
);
};
export default App;
Conclusão
Nesse artigo pudemos entender os conceitos básicos de Props, States e Hooks e também criamos nosso próprio Hook personalizado.
Esses conceitos são essenciais na vida do programador React e React Native, por isso, se você está pensando em entrar nesse mundo
React
, é bastante interessante e importante aprender bem a utilizá-los.
Por isso criamos esse conteúdo, para ajudar o pessoal a entender bem do básico, esses indispensáveis recursos do React.
E se você quer ver mais conteúdos como este não deixe de assistir o nosso JavaScript: Filter, Map, Reduce o Guia Supremo.
Neste guia, você vai aprender as 3 funções mais importantes do JavaScript que irão lhe ajudar demais no desenvolvimento de aplicativos.
Caso tenha alguma dúvida ou sugestão, coloca ai nos comentários. AH… Também conta ai pra gente oque achou desse conteúdo e se você deseja aprender mais sobre os Hooks com exemplos mais profissionais…
Muito bom o tutorial.
Parabens.
Thank you!!1
????????show!!!