Если вы новичок в React Native или React, вы встречали слова state и props. Понимание этих двух факторов необходимо для разработки динамичных и адаптируемых мобильных приложений. В этой статье блога мы углубимся в состояние и реквизиты, рассмотрим их различия и узнаем, как эффективно обрабатывать поток данных в вашем приложении React Native.

Что такое состояние и реквизит?

Состояние

Состояние — это встроенный объект, который позволяет компонентам создавать собственные данные и управлять ими. Он содержит информацию, которая может измениться в течение жизненного цикла компонента. Всякий раз, когда состояние изменяется, компонент перерисовывается, чтобы отразить эти изменения.

• Mutable: Состояние можно изменить с помощью setState (в компонентах класса) или ловушки useState (в функциональных компонентах).
• Локально для компонента: Состояние полностью инкапсулировано и локально для компонента.
• Запускает повторный рендеринг: Обновление состояния приводит к повторному рендерингу компонента.

Реквизит

Props, сокращение от свойств, являются компонентами, доступными только для чтения. Это внешние параметры, передаваемые в компонент, аналогично тому, как аргументы передаются в функцию.

• Неизменяемый: Свойства не могут быть изменены компонентом, который их получает.
• Передается от родительского компонента: Свойства передаются из родительских компонентов в дочерние.
• Используется для настройки: Они настраивают компонент и управляют его поведением извне.

Понимание разницы

Понимание того, когда использовать состояние, а когда реквизиты, является ключом к управлению потоком данных в вашем приложении.

Почему они важны?

• Состояние необходимо для компонентов, которым необходимо отслеживать и реагировать на ввод пользователя, ответы API или другие динамические данные.
• Props позволяют повторно использовать компоненты, принимая динамические данные и функции, что делает ваш код более модульным и удобным в сопровождении.

Эффективное управление потоком данных

Эффективное управление потоками данных гарантирует, что ваше приложение будет работать предсказуемо, а также его будет легче отлаживать и поддерживать.

1. Односторонний поток данных

React Native использует однонаправленный поток данных. Данные перемещаются от родительского компонента к дочернему через реквизиты. Это упрощает понимание и отладку потока данных.

2. Подъем состояния

Когда нескольким компонентам требуется доступ к одному и тому же фрагменту данных, лучше всего поднять состояние до ближайшего общего предка. Таким образом, общее состояние может быть передано через реквизит.

3. Использование обратных вызовов для общения между детьми и родителями

Чтобы разрешить дочерним компонентам взаимодействовать с родительскими компонентами, вы можете передавать функции (обратные вызовы) в качестве реквизитов. Дочерний компонент может затем вызвать эту функцию для отправки данных обратно родительскому компоненту.

Примеры

Давайте рассмотрим несколько примеров кода, иллюстрирующих эти концепции.

Пример 1: использование реквизита

Родительский компонент (App.js):

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

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

export default App;

Дочерний компонент (Greeting.js):

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

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

export default Greeting;

Объяснение:

• Компонент приложения передает свойство имени компоненту приветствия.
• Компонент приветствия получает реквизиты и использует props.name для отображения персонализированного сообщения.

Пример 2: Использование состояния

Компонент счетчика (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;

Объяснение:

• Мы используем хук useState для инициализации счетчика равным 0.
• Функция setCount обновляет состояние.
• При нажатии кнопки счетчик увеличивается, и компонент повторно визуализируется для отображения нового счетчика.

Пример 3: подъем состояния вверх

Родительский компонент (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;

Дочерний компонент (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;

Объяснение:

• Температура и шкала общего состояния передаются в компонент TemperatureConverter.
• Компоненты ClimateInput получают реквизиты и передают изменения родительскому элементу посредством обратных вызовов.

Лучшие практики

1. По возможности сохраняйте состояние компонентов

Компоненты без сохранения состояния легче тестировать и отлаживать. Используйте реквизит для передачи им данных.

2. Минимизируйте состояние состояния

Используйте состояние только при необходимости. Слишком большое количество компонентов с сохранением состояния может затруднить управление вашим приложением.

3. Избегайте прямой мутации состояния

Никогда не изменяйте состояние напрямую. Всегда используйте setState или функцию обновления из useState.

4. Используйте PropTypes для проверки типов

Используйте PropTypes для документирования предполагаемых типов свойств, передаваемых компонентам.

import PropTypes from 'prop-types';

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

5. Используйте контекстный API для глобального состояния

Для данных, которые должны быть доступны многим компонентам на разных уровнях вложенности, рассмотрите возможность использования Context API.

Распространенные ошибки, которых следует избегать

• Непосредственное изменение состояния:

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

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

• Использование реквизитов для прямого изменения родительского состояния:

Дочерние компоненты не должны пытаться напрямую изменять свойства или родительское состояние. Используйте обратные вызовы.

Заключение

Понимание и эффективное управление состоянием и реквизитами имеет важное значение для любого разработчика React Native. Освоив эти концепции, вы сможете создавать приложения, которые не только функциональны, но и понятны, эффективны и удобны в обслуживании.

Помнить:

• Состояние предназначено для данных, которые изменяются со временем и управляются внутри компонента.
• Props предназначены для передачи данных и функций вниз по дереву компонентов.

Потратьте время на применение этих концепций в своих проектах, и вы увидите значительное улучшение рабочего процесса разработки.