В React (и React Native), state и props — это два фундаментальных механизма управления данными и поведением компонентов. Они играют ключевую роль в реактивной модели, на которой основана библиотека. Несмотря на то, что они оба отвечают за управление данными, у них разные источники, назначение и правила изменения.

props (свойства)

Что такое props?

props (от слова "properties") — это входные параметры компонента, передаваемые извне, обычно от родительского компонента к дочернему. Они делают компонент настраиваемым и переиспользуемым.

Компоненты React можно представить как функции, которые принимают props как аргументы и возвращают JSX.

function Welcome(props) {
return <Text>Привет, {props.name}</Text>;
}
<Welcome name="Алиса" />

В данном случае:

• props.name равен "Алиса"

• Компонент <Welcome /> может быть переиспользован с разными именами

Основные особенности props:

• Передаются извне — от родителя к потомку.

• Неизменяемы (read-only) внутри дочернего компонента.

• Могут быть любого типа: строки, числа, функции, компоненты, объекты, массивы и т.д.

• Можно использовать деструктуризацию:

function Welcome({ name }) {
return <Text>Привет, {name}</Text>;
}

Примеры:

1. Передача строки:

<Title text="Добро пожаловать!" />
function Title({ text }) {
return <Text>{text}</Text>;
}

2. Передача обработчика события:

<Button title="Нажми" onPress={() => alert("Кнопка нажата!")} />

3. Передача компонента как пропса (render props):

<Wrapper renderContent={() => <Text>Динамический контент</Text>} />

children — специальный проп

Каждый компонент может автоматически получить содержимое, вложенное между его тегами, через props.children.

<Card>
<Text>Это текст внутри компонента Card</Text>
</Card>
function Card({ children }) {
return <View>{children}</View>;
}

state (состояние)

Что такое state?

state — это локальные данные, управляемые внутри самого компонента. Оно используется для хранения информации, которая может изменяться со временем и влияет на отображение UI.

В отличие от props, которые компонент получает извне и не может менять, state — это внутренние, изменяемые данные, контролируемые самим компонентом.

Основные особенности state:

• Объявляется внутри компонента.

• Может быть изменён с помощью функции setState (в классах) или useState (в функциональных компонентах).

• Изменение state автоматически вызывает перерисовку компонента.

• Используется для управления интерактивным поведением интерфейса (отображение/скрытие элементов, данные форм, лоадеры и т.п.).

Использование state с useState (функциональные компоненты)

import React, { useState } from 'react';
import { Text, Button, View } from 'react-native';
function Counter() {
const \[count, setCount\] = useState(0);
return (
<View>
<Text>Счётчик: {count}</Text>
<Button title="Увеличить" onPress={() => setCount(count + 1)} />
</View>
);
}

Объяснение:

• useState(0) — создаёт переменную count со значением 0.

• setCount — функция, изменяющая count.

• Каждый вызов setCount перерисовывает компонент.

state в классах (реже используется после появления хуков)

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increase = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<View>
<Text>{this.state.count}</Text>
<Button title="Добавить" onPress={this.increase} />
</View>
);
}
}

Можно хранить в state:

• Числа, строки

• Объекты (например, формы)

• Массивы (списки данных)

• Булевы значения (показ/скрытие)

• Ссылки на компоненты

• Любые сериализуемые данные

Различия между props и state

Взаимодействие props и state

Компонент может использовать оба механизма одновременно:

function GreetingCounter({ name }) {
const \[count, setCount\] = useState(0);
return (
<View>
<Text>Привет, {name}! Ты нажал {count} раз(а)</Text>
<Button title="Нажми" onPress={() => setCount(count + 1)} />
</View>
);
}

• name приходит через props.

• count управляется через state.

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

React построен на принципе одностороннего (унидирекционного) потока данных:

• Родитель передаёт данные вниз через props.

• Дочерний компонент может вызвать функцию, переданную через props, чтобы сообщить родителю об изменении (паттерн "поднятие состояния").

Пример обратного вызова:

function Parent() {
const \[value, setValue\] = useState("");
return <Child onChange={setValue} />;
}
function Child({ onChange }) {
return (
<TextInput onChangeText={(text) => onChange(text)} />
);
}

Условный рендеринг с использованием state

function Toggle() {
const \[visible, setVisible\] = useState(true);
return (
<View>
<Button title="Переключить" onPress={() => setVisible(!visible)} />
{visible && <Text>Этот текст можно скрыть</Text>}
</View>
);
}

Несколько состояний в одном компоненте

const \[name, setName\] = useState('');
const \[age, setAge\] = useState(0);
const \[isAdmin, setIsAdmin\] = useState(false);

Или можно использовать один объект:

const \[user, setUser\] = useState({ name: '', age: 0, isAdmin: false });
function updateName(newName) {
setUser(prev => ({ ...prev, name: newName }));
}

Оба механизма — state и props — являются основой реактивности и динамического поведения компонентов React. Управление ими позволяет строить интерактивные, адаптивные и масштабируемые пользовательские интерфейсы.