Se você é novo no React Native ou React, já se deparou com as palavras estado e adereços. Compreender esses dois é essencial para desenvolver aplicativos móveis dinâmicos e adaptáveis. Iremos nos aprofundar no estado e nos adereços neste artigo do blog, examinaremos suas diferenças e aprenderemos como lidar com eficácia com o fluxo de dados em seu aplicativo React Native.

O que são estados e acessórios?

Estado

State é um objeto integrado que permite aos componentes criar e gerenciar seus próprios dados. Ele contém informações que podem mudar ao longo do ciclo de vida do componente. Sempre que o estado muda, o componente é renderizado novamente para refletir essas mudanças.

• Mutável: O estado pode ser alterado usando setState (em componentes de classe) ou useState hook (em componentes funcionais).
• Local para o componente: O estado é totalmente encapsulado e local para o componente.
• Aciona a nova renderização: Atualizar o estado faz com que o componente seja renderizado novamente.

Adereços

Props, abreviação de propriedades, são componentes somente leitura. Eles são parâmetros externos passados ​​para um componente, semelhantes a como os argumentos são passados ​​para uma função.

• Imutável: Props não podem ser modificados pelo componente que os recebe.
• Passado do pai: Os adereços são passados ​​dos componentes pai para os componentes filhos.
• Usado para configuração: Eles configuram um componente e controlam seu comportamento externamente.

Compreendendo a diferença

Entender quando usar estado e quando usar adereços é fundamental para gerenciar o fluxo de dados em seu aplicativo.

Por que eles são importantes?

• Estado é essencial para componentes que precisam rastrear e responder à entrada do usuário, respostas da API ou outros dados dinâmicos.
• Props permitem que os componentes sejam reutilizáveis, aceitando dados e funções dinâmicas, tornando seu código mais modular e de fácil manutenção.

Gerenciando o fluxo de dados de maneira eficaz

O gerenciamento eficaz do fluxo de dados garante que seu aplicativo se comporte de maneira previsível e seja mais fácil de depurar e manter.

1. Fluxo de dados unidirecional

React Native usa um fluxo de dados unidirecional. Os dados são transferidos dos componentes pai para filho por meio de adereços. Isso torna o fluxo de dados mais fácil de entender e depurar.

2. Elevando o Estado

Quando vários componentes precisam acessar o mesmo dado, é melhor elevar o estado ao ancestral comum mais próximo. Dessa forma, o estado compartilhado pode ser transmitido por meio de adereços.

3. Usando retornos de chamada para comunicação entre filhos e pais

Para permitir que componentes filhos se comuniquem com componentes pais, você pode transmitir funções (retornos de chamada) como adereços. O componente filho pode então chamar esta função para enviar dados de volta ao pai.

Exemplos

Vejamos alguns exemplos de código para ilustrar esses conceitos.

Exemplo 1: Usando adereços

Componente pai (App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

Componente filho (Greeting.js):

import React from 'react';
import { Text } from 'react-native';

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

Explicação:

• O componente App passa a propriedade name para o componente Greeting.
• O componente Greeting recebe adereços e usa props.name para exibir uma mensagem personalizada.

Exemplo 2: Usando Estado

Componente contador (Counter.js):

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    
      You clicked {count} times
       setCount(count   1)} />
    
  );
};

export default Counter;

Explicação:

• Usamos o gancho useState para inicializar a contagem como 0.
• A função setCount atualiza o estado.
• Quando o botão é pressionado, a contagem aumenta e o componente é renderizado novamente para exibir a nova contagem.

Exemplo 3: Elevando o Estado

Componente pai (TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
      
      
    
  );
};

export default TemperatureConverter;

Componente filho (TemperatureInput.js):

import React from 'react';
import { TextInput, Text } from 'react-native';

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:
      
    >
  );
};

export default TemperatureInput;

Explicação:

• A temperatura e a escala do estado compartilhado são elevadas ao componente TemperatureConverter.
• Os componentes TemperatureInput recebem adereços e comunicam as alterações ao pai por meio de retornos de chamada.

Práticas recomendadas

1. Mantenha os componentes sem estado quando possível

Componentes sem estado são mais fáceis de testar e depurar. Use adereços para passar dados para eles.

2. Minimize o estado

Use o estado apenas quando necessário. Muitos componentes com estado podem dificultar o gerenciamento do seu aplicativo.

3. Evite mutação direta de estado

Nunca altere o estado diretamente. Sempre use setState ou a função de atualização de useState.

4. Use PropTypes para verificação de tipo

Use PropTypes para documentar os tipos pretendidos de propriedades passadas aos componentes.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. Utilize API de contexto para estado global

Para dados que precisam ser acessíveis por muitos componentes em diferentes níveis de aninhamento, considere usar a API Context.

Erros comuns a serem evitados

• Mutação direta do estado:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• Usando adereços para modificar o estado pai diretamente:

Componentes filhos não devem tentar modificar adereços ou estado pai diretamente. Use retornos de chamada.

Conclusão

Compreender e gerenciar efetivamente estados e adereços é essencial para qualquer desenvolvedor React Native. Ao dominar esses conceitos, você será capaz de criar aplicativos que não são apenas funcionais, mas também limpos, eficientes e de fácil manutenção.

Lembrar:

• Estado é para dados que mudam ao longo do tempo e são gerenciados dentro do componente.
• Props servem para passar dados e funções para baixo na árvore de componentes.

Reserve um tempo para praticar esses conceitos em seus projetos e você verá uma melhoria significativa em seu fluxo de trabalho de desenvolvimento.