PassFront
  1. PassFront
  2. База знаний
  3. Основы React

Данные в React передаются однонаправленно или разнонаправленно?

Основы React

В React поток данных однонаправленный (one-way data flow): данные движутся строго сверху вниз — от родителей к детям через props.

Как выглядит однонаправленность

const App = () => {
  const [user, setUser] = useState(me);
  return <Profile user={user} />;        // данные ↓ вниз
};

const Profile = ({ user }) => <Avatar url={user.avatar} />; // ещё ниже ↓
  • Источник правды один — состояние где-то наверху; дети получают копии через props и не могут их менять (props read-only).
  • «Обратной записи» данных снизу вверх нет.

А как же события от детей?

Дети сообщают наверх через колбэки, но это не передача данных «вверх» в смысле потока: родитель передал вниз функцию, ребёнок её вызвал — изменение всё равно происходит наверху, у владельца состояния, и спускается вниз новым рендером:

const App = () => {
  const [query, setQuery] = useState('');
  return <Search value={query} onChange={setQuery} />; // ↓ данные и колбэк
};
// Search вызывает onChange('react') → state меняется В App → новые props ↓

Цикл: state → props → событие → обновление state → новые props. Всегда по кругу через верх.

Зачем так

  • Предсказуемость: у любого значения один источник; баг ищется движением вверх по дереву.
  • Отладка: изменения происходят в известных местах (владелец состояния), а не «где угодно».
  • Контраст — двунаправленный биндинг (Angular 1.x, v-model): форма меняет модель, модель — форму; удобно, но труднее отслеживать причинность в больших приложениях.

Context и сторы не отменяют принципа: данные всё равно текут от провайдера/стора вниз к подписчикам, изменения — через явные действия.

Коротко для собеседования

Однонаправленно: сверху вниз через props; props неизменяемы. Дети «сообщают» вверх колбэками, но состояние меняется у владельца наверху и спускается вниз новым рендером. Это даёт единственный источник правды и предсказуемую отладку; контекст и сторы следуют тому же принципу.

Другие вопросы раздела