Поток данных в React: однонаправленный или разнонаправленный?

React использует однонаправленный поток данных (one-way data binding). Это фундаментальный принцип архитектуры React. Данные всегда текут в одном направлении: от родителя к дочерним компонентам, а обратно — через колбэки.

Однонаправленный поток данных (One-way Data Binding)

Данные текут сверху вниз — от родительского компонента к дочерним через props.

// Родитель
function Parent() {
  const message = "Hello from parent"
  
  return <Child message={message} />
}

// Дочерний компонент получает данные
function Child({ message }) {
  return <div>{message}</div>
}

// Поток данных: Parent -> Child

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

// Родитель управляет состоянием
function Parent() {
  const [count, setCount] = useState(0)
  
  const handleIncrement = () => {
    setCount(prev => prev + 1)
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <Child count={count} onIncrement={handleIncrement} />
    </div>
  )
}

// Дочерний компонент не меняет состояние напрямую
function Child({ count, onIncrement }) {
  return (
    <div>
      <p>Dochka vidit: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  )
}

// Поток обратно: Child -> onIncrement callback -> Parent

Схема потока данных

РОДИТЕЛЬ (Parent)
    |
    | Props (вниз)
    |
    v
ДОЧЕРНИЙ (Child)
    |
    | Callbacks (вверх)
    |
    v
РОДИТЕЛЬ обновляет state

Реальный пример: форма с входными полями

❌ НЕПРАВИЛЬНО: попытка двусторонней привязки (разнонаправленный поток)

// Это был бы разнонаправленный поток, но React так НЕ работает
function BadForm() {
  // Дочерний компонент пытается менять родительское состояние
  const [email, setEmail] = useState("")
  
  return (
    <div>
      {/* Input пытается менять состояние напрямую - это нарушает однонаправленный поток */}
      <Input value={email} onChange={setEmail} /> {/* Плохо! */}
    </div>
  )
}

✅ ПРАВИЛЬНО: явный однонаправленный поток

// Родитель управляет всем состоянием
function GoodForm() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    name: ""
  })
  
  // Колбэки для обновления состояния
  const handleEmailChange = (newEmail) => {
    setFormData(prev => ({
      ...prev,
      email: newEmail
    }))
  }
  
  const handlePasswordChange = (newPassword) => {
    setFormData(prev => ({
      ...prev,
      password: newPassword
    }))
  }
  
  const handleNameChange = (newName) => {
    setFormData(prev => ({
      ...prev,
      name: newName
    }))
  }
  
  return (
    <form>
      {/* Данные текут вниз (props) */}
      <Input
        label="Email"
        value={formData.email}
        onChange={handleEmailChange} // Колбэк текет вверх
      />
      <Input
        label="Password"
        value={formData.password}
        onChange={handlePasswordChange}
      />
      <Input
        label="Name"
        value={formData.name}
        onChange={handleNameChange}
      />
    </form>
  )
}

// Дочерний компонент Input
function Input({ label, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <input
        type="text"
        value={value} {/* Данные идут вниз */}
        onChange={(e) => onChange(e.target.value)} {/* Событие идет вверх */}
      />
    </div>
  )
}

// Поток:
// GoodForm --props--> Input
// Input --callback--> GoodForm --setState--> GoodForm --new props--> Input

Сравнение с двусторонней привязкой (Vue.js)

React (однонаправленный):

function ReactComponent() {
  const [value, setValue] = useState("")
  
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

// Явно: onChange -> setValue -> re-render -> новое value

Vue.js (двусторонняя привязка):

<!-- Vue магически связывает input и data -->
<input v-model="value" />

<script>
export default {
  data() {
    return {
      value: ""
    }
  }
}
</script>

<!-- Любое изменение input сразу меняет value и наоборот -->

Почему React выбрал однонаправленный поток?

1. Предсказуемость

function Parent() {
  const [count, setCount] = useState(0)
  
  // Ясно, где и как меняется count
  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

// Vs двусторонняя привязка, где изменения могут быть из разных мест

2. Отладка

// Легко проследить откуда пришло значение
function Child({ value }) {
  console.log("value comes from parent:", value)
  
  // Однонаправленный поток делает отладку простой
  return <div>{value}</div>
}

3. Производительность

Реакт может оптимизировать re-render, зная что данные идут только вниз.

4. Масштабируемость

Для больших приложений ясный поток данных критичен.

Комплексный пример: многоуровневая иерархия

// Уровень 1: App (главный компонент)
function App() {
  const [user, setUser] = useState({ name: "John", email: "" })
  
  const handleUserUpdate = (newUser) => {
    setUser(newUser)
  }
  
  return (
    <div>
      <Header user={user} />
      <Profile user={user} onUserUpdate={handleUserUpdate} />
      <Footer />
    </div>
  )
}

// Уровень 2: Profile
function Profile({ user, onUserUpdate }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <EditForm user={user} onSave={onUserUpdate} />
    </div>
  )
}

// Уровень 3: EditForm
function EditForm({ user, onSave }) {
  const [formData, setFormData] = useState(user)
  
  const handleSubmit = () => {
    onSave(formData) // Передаем данные вверх
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) =>
          setFormData(prev => ({
            ...prev,
            name: e.target.value
          }))
        }
      />
      <button type="submit">Save</button>
    </form>
  )
}

// Поток данных:
// App (source of truth)
// |
// +-> user (props) -> Profile
//     |
//     +-> user (props) -> EditForm
//         |
//         +-> onSave (callback) -> EditForm handleSubmit
//             |
//             +-> onUserUpdate (callback) -> Profile onUserUpdate
//                 |
//                 +-> handleUserUpdate -> App setUser
//                     |
//                     +-> App re-render
//                         |
//                         +-> новое user (props) -> Profile -> EditForm

Исключение: Lift State Up

Когда несколько компонентов нужно синхронизировать, поднимаешь состояние выше:

// ❌ Попытка синхронизировать между двумя компонентами
function Sibling1() {
  const [value, setValue] = useState("")
  // Как передать value в Sibling2?
}

function Sibling2() {
  // Нет доступа к value из Sibling1
}

// ✅ Поднимаем state в общего родителя
function Parent() {
  const [value, setValue] = useState("")
  
  return (
    <div>
      <Sibling1 value={value} onChange={setValue} />
      <Sibling2 value={value} />
    </div>
  )
}

Вывод

React использует ОДНОНАПРАВЛЕННЫЙ поток данных:

• Вниз: Props передают данные от родителя к дочерним компонентам
• Вверх: Callbacks сообщают о событиях и изменениях родителю
• Состояние: Хранится в родителе или управляющей библиотеке (Context, Redux)

Преимущества:

• Предсказуемость (ясно, откуда берутся данные)
• Отладка (легко проследить flow)
• Тестируемость (компоненты изолированы)
• Масштабируемость (четкая архитектура)

Это кардинально отличает React от фреймворков с двусторонней привязкой (Vue, Angular), которые могут быть проще для небольших приложений, но сложнее для масштабирования.