В чем разница между Vuix и Props?

Разница между Vue (или компонентным состоянием) и Props

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

Props - Входные данные

Props (properties) — это способ передачи данных родительского компонента в дочерний. Это только для чтения данные, которые приходят "сверху вниз".

// Родительский компонент
export function Parent() {
  return <Child name="Иван" age={25} />;
}

// Дочерний компонент
function Child({ name, age }) {
  return (
    <div>
      <p>Имя: {name}</p>
      <p>Возраст: {age}</p>
    </div>
  );
}

Свойства Props:

• Передаются от родителя к ребенку
• Только для чтения (не изменяемы напрямую)
• Являются "контрактом" между родителем и ребенком
• Поток данных: родитель -> ребенок

Локальное состояние компонента (State)

State (состояние) — это данные, которые принадлежат компоненту и управляются внутри его. Состояние может изменяться и вызывает перерендеринг компонента.

import { useState } from react;

function Counter() {
  // состояние (state)
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Счет: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

Свойства State:

• Принадлежит компоненту
• Управляется через useState или this.state
• Изменяемо (через setState или setCount)
• Изменение состояния вызывает перерендеринг
• Приватно для компонента

Сравнительная таблица

Практический пример 1: Props

// Родитель
export function UserList() {
  const users = [
    { id: 1, name: "Иван" },
    { id: 2, name: "Мария" },
    { id: 3, name: "Петр" }
  ];
  
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} name={user.name} />
      ))}
    </div>
  );
}

// Ребенок (получает Props)
function UserCard({ name }) {
  return <div class="card">{name}</div>;
}

Здесь name — это Props, переданная родителем. Компонент UserCard не может изменить name напрямую.

Практический пример 2: State

function SearchBox() {
  // state - локальное состояние компонента
  const [searchTerm, setSearchTerm] = useState("");
  
  const handleChange = (e) => {
    // изменяем state
    setSearchTerm(e.target.value);
  };
  
  return (
    <input
      type="text"
      value={searchTerm}
      onChange={handleChange}
      placeholder="Поиск..."
    />
  );
}

Здесь searchTerm — это State, который принадлежит компоненту и может изменяться.

Практический пример 3: Комбинирование Props и State

function Product({ name, price }) {
  // Props
  const [quantity, setQuantity] = useState(1); // State
  
  const totalPrice = price * quantity;
  
  return (
    <div class="product">
      <h3>{name}</h3> {/* Props */}
      <p>Цена: {price}</p> {/* Props */}
      <p>Количество: {quantity}</p> {/* State */}
      <p>Итого: {totalPrice}</p>
      <button onClick={() => setQuantity(quantity + 1)}>
        Добавить
      </button>
    </div>
  );
}

Здесь name и price — это Props от родителя, а quantity — это State компонента.

Поток данных в React

Родитель компонент
    |
    | Props (от родителя к ребенку)
    v
Дочерний компонент
    |
    | State (внутри компонента)
    v
Антаром - ребенок не может изменить Props
Но может обновить внутреннее State
    |
    | Callback (от ребенка к родителю)
    v
Родитель обновляет свой State
    |
    | Props изменяются
    v
Дочерний компонент перерендерится

Когда использовать Props

// ПРАВИЛЬНО - использовать Props для статических/приходящих данных
function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// НЕПРАВИЛЬНО - пытаться изменять Props
function Button({ label }) {
  const handleClick = () => {
    label = "Нажато"; // ОШИБКА! Не изменяет компонент
  };
  return <button onClick={handleClick}>{label}</button>;
}

Когда использовать State

// ПРАВИЛЬНО - использовать State для изменяемых данных
function Toggle() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Закрыть" : "Открыть"}
      </button>
      {isOpen && <div>Содержимое</div>}
    </div>
  );
}

Пример: Изменение Props через callback

// Родитель управляет состоянием
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <Counter 
      count={count}  // Props
      onIncrement={() => setCount(count + 1)}  // callback как Props
    />
  );
}

// Ребенок получает Props
function Counter({ count, onIncrement }) {
  return (
    <div>
      <p>Счет: {count}</p>
      <button onClick={onIncrement}>Увеличить</button>
      {/* count не может изменить напрямую */}
      {/* используем callback onIncrement */}
    </div>
  );
}

Если это вопрос о Vue.js State vs Props

В Vue:

// Props - входные данные
export default {
  props: {
    title: String,
    count: Number
  },
  // State - локальные данные (data в Vue 2, reactive в Vue 3)
  data() {
    return {
      message: "",
      items: []
    };
  }
};

<!-- Props - только чтение -->
<h1>{{ title }}</h1> <!-- Props -->
<p>{{ count }}</p> <!-- Props -->

<!-- State - можно изменять -->
<input v-model="message" /> <!-- State -->

Правило потока данных

1. Props — однонаправленны (только от родителя к ребенку)
2. State — приватен (только внутри компонента)
3. Для общих данных используйте Context (React) или Provide/Inject (Vue)
4. Для сложных состояний используйте Redux (React) или Vuex (Vue)

Ключевые выводы

1. Props — это входные данные от родителя, только для чтения
2. State — это локальные данные компонента, изменяемые
3. Поток данных: родитель (через Props) -> ребенок (state) -> родитель (через callback)
4. Props используются для передачи конфигурации и данных
5. State используется для управления изменяемыми данными внутри компонента
6. Правильное использование Props и State делает компоненты переиспользуемыми и предсказуемыми