Что такое props и state в React и в чём их отличие?

Что такое props и state в React и в чём их отличие

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

Props — входные параметры компонента

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

Основной пример

// Дочерний компонент
function User({ name, age, isActive }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

// Родительский компонент
function App() {
  return (
    <User name="John" age={30} isActive={true} />
  );
}

Характеристики props

• Только для чтения: нельзя изменять props внутри компонента
• Передаются сверху вниз: от родителя к дочернему компоненту
• Помощь в переиспользовании: один компонент с разными props
• Подобны параметрам функции: аргументы, которые получает компонент

Попытка изменения props (будет ошибка)

function User({ name }) {
  // Это вызовет ошибку! Props нельзя менять
  name = "Jane"; // TypeError: Cannot assign to read only property 'name'
  
  return <h1>{name}</h1>;
}

State — локальные данные компонента

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

Функциональные компоненты с hooks (современный подход)

import { useState } from 'react';

function Counter() {
  // useState возвращает [текущее значение, функция для изменения]
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  const increment = () => {
    // setCount обновляет state и запускает перерендер
    setCount(count + 1);
  };

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      
      <input value={name} onChange={handleNameChange} />
      <p>Name: {name}</p>
    </div>
  );
}

Классовые компоненты (старый подход)

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: 'John'
    };
  }

  increment = () => {
    // setState изменяет state и переренд компонент
    this.setState({ count: this.state.count + 1 });
  }

  handleNameChange = (e) => {
    this.setState({ name: e.target.value });
  }

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
        
        <input value={this.state.name} onChange={this.handleNameChange} />
        <p>Name: {this.state.name}</p>
      </div>
    );
  }
}

Ключевые различия

Практический пример: Форма с props и state

function Form({ onSubmit }) {
  // State для хранения значений формы
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Отправляем данные через props callback
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Sign In</button>
    </form>
  );
}

function App() {
  const handleFormSubmit = (data) => {
    console.log('Form submitted:', data);
  };

  // Передаем callback через props
  return <Form onSubmit={handleFormSubmit} />;
}

State с несколькими значениями

function UserProfile({ userId }) {
  // State для данных пользователя
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Эффект для загрузки данных (использует props userId)
  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]); // userId — это prop

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  if (!user) return null;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Когда использовать props vs state

Используй props для

• Передачи данных от родителя к дочернему компоненту
• Настройки поведения компонента
• Передачи callback функций
• Переиспользования компонента с разными данными

Используй state для

• Хранения локальных данных компонента
• Значений формы
• Временных данных (выбор в выпадающем списке)
• Результатов API запросов
• UI состояния (открыта модальное окно или нет)

Лучшие практики

// Плохо — изменение state напрямую
const [count, setCount] = useState(0);
count = count + 1; // Не работает!

// Хорошо — использование setCount
setCount(count + 1);

// Плохо — мутирование объектов в state
const [user, setUser] = useState({ name: 'John' });
user.name = 'Jane'; // Не вызовет перерендер!

// Хорошо — создание нового объекта
setUser({ ...user, name: 'Jane' });

// Плохо — использование props как state
function Component({ defaultName }) {
  const [name, setName] = useState(defaultName);
  // Если defaultName изменится в родителе, state не обновится!
}

// Хорошо — использование useEffect для синхронизации
function Component({ defaultName }) {
  const [name, setName] = useState(defaultName);
  
  useEffect(() => {
    setName(defaultName);
  }, [defaultName]);
}

Итоги

• Props — входные параметры компонента, передаются от родителя
• State — локальные данные, которые может менять сам компонент
• Props только для чтения, state изменяется через setter функции
• Props идут сверху вниз, state локален компоненту
• Правильное использование props и state — основа React приложений