React использует архитектуру с однонаправленным потоком данных — это основной принцип фреймворка. Такой подход упрощает движение данных через твоё приложение и делает отладку и поддержку проще.
Данные текут из родительских компонентов в дочерние через props. Когда родительский компонент имеет состояние, он передаёт нужные данные своим дочерним компонентам в виде пропсов. Дочерние компоненты получают эти данные как props только для чтения и не могут напрямую изменять состояние родителя.
Когда дочернему компоненту нужно обновить данные, он должен вызвать колбэк, переданный от родителя через props. Затем родитель обновляет своё состояние, что автоматически вызывает перерисовку с обновлёнными props, которые спускаются вниз к дочерним компонентам.
Родительский компонент (хранит состояние)
↓ передаёт данные через props
Дочерний компонент (получает props)
↓ взаимодействие пользователя
Дочерний вызывает колбэк
↓ колбэк
Родитель обновляет состояние
↓ перерисовка с новыми props
Дочерний получает обновлённые данные
В отличие от традиционных фреймворков с двусторонней привязкой данных (где изменения текут в обе стороны автоматически), однонаправленный поток React требует явных обновлений. Хотя это означает чуть больше кода, зато ты получаешь больше контроля и прозрачности над поведением данных в приложении.
В однонаправленном потоке данных React дочерние компоненты могут напрямую изменять состояние родителя через props, и родитель автоматически перерендерится с обновленными значениями.
Новый — ещё не проверен сообществом
Вы