Данные в 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 неизменяемы. Дети «сообщают» вверх колбэками, но состояние меняется у владельца наверху и спускается вниз новым рендером. Это даёт единственный источник правды и предсказуемую отладку; контекст и сторы следуют тому же принципу.