В чем разница между двунаправленным и однонаправленным связыванием?
Продвинутые темы
Двунаправленное и однонаправленное связывание различают направление потока данных между состоянием и представлением: однонаправленное — в одну сторону (данные → UI), двунаправленное — в обе (данные ↔ UI).
Однонаправленное связывание (one-way)
Данные текут в одну сторону — из состояния в UI. Для обновления состояния из UI нужен явный обработчик:
// React
<input value={text} onChange={(e) => setText(e.target.value)} />Поток: state → UI → (событие) → обработчик → state. Предсказуемо и отслеживаемо.
Двунаправленное связывание (two-way)
Состояние и UI синхронизируются автоматически в обе стороны:
<input v-model="text"> <!-- Vue: изменение поля обновляет text и наоборот -->Меньше кода, но менее явный поток.
Различия
- Направление потока: однонаправленное — data → view; двунаправленное — data ↔ view.
- Предсказуемость: однонаправленное легче отследить (одна точка изменения); двунаправленное короче, но труднее отлаживать при сложной логике.
- Контроль: однонаправленное даёт явный контроль над изменениями.
Где применяется
- React — однонаправленный поток (осознанный выбор ради предсказуемости и отладки).
- Vue/Angular — двунаправленное (
v-model/ngModel) как удобный сахар. - Flux/Redux — строго однонаправленный поток на уровне архитектуры.
Коротко для собеседования
Однонаправленное связывание — поток данных в одну сторону (state → UI), обратно через явный обработчик (React); предсказуемо, легко отлаживать. Двунаправленное — автоматическая синхронизация в обе стороны (Vue v-model); меньше кода, но менее прозрачно. React/Flux выбирают однонаправленность ради предсказуемости.