Что такое props и почему props иммутабельны?

Краткий ответ

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

✅ Почему props иммутабельны:

Однонаправленный поток данных (сверху вниз)
Предотвращение побочных эффектов
Упрощение отладки и тестирования
Повышение производительности (через механизм сравнения)

❌ Что нельзя делать с props:

Изменять напрямую (props.name = 'new name')
Мутировать объекты и массивы в props
Удалять свойства из props

Ключевое правило: Компонент может читать props, но не может их изменять — за это отвечает родительский компонент.

Полный ответ

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

Что такое props

Props — это способ передачи данных от родительского компонента к дочернему:

// Родительский компонент передает данные
function App() {
  return (
    <div>
      <UserProfile 
        name="Александр" 
        age={25} 
        hobbies={['программирование', 'музыка']} 
      />
      <UserSettings theme="dark" notifications={true} />
    </div>
  );
}
 
// Дочерний компонент получает props
function UserProfile(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Возраст: {props.age}</p>
      <ul>
        {props.hobbies.map(hobby => <li key={hobby}>{hobby}</li>)}
      </ul>
    </div>
  );
}
 
// С деструктуризацией
function UserSettings({ theme, notifications }) {
  return (
    <div>
      <p>Тема: {theme}</p>
      <p>Уведомления: {notifications ? 'вкл' : 'выкл'}</p>
    </div>
  );
}

Почему props иммутабельны

1. Однонаправленный поток данных

React использует однонаправленный поток данных (unidirectional data flow), где данные передаются сверху вниз:

// ❌ Неправильно - попытка изменить props
function ChildComponent(props) {
  // props.name = 'Новое имя'; // ❌ Ошибка! Props нельзя изменять
  
  return <div>Привет, {props.name}!</div>;
}
 
// ✅ Правильно - компонент просто использует props
function ChildComponent({ name }) {
  return <div>Привет, {name}!</div>;
}
 
// Если нужно изменить данные, используйте состояние
function ParentComponent() {
  const [name, setName] = useState('Александр');
  
  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Анна')}>
        Изменить имя
      </button>
    </div>
  );
}

2. Предотвращение побочных эффектов

Иммутабельность props предотвращает побочные эффекты и непредсказуемое поведение:

// ❌ Опасный код - изменение props может повлиять на другие компоненты
function BadComponent(props) {
  // props.user.name = 'Новое имя'; // ❌ Это может повлиять на родительский компонент!
  
  return <div>{props.user.name}</div>;
}
 
// ✅ Безопасный код - создание копии для изменений
function GoodComponent({ user }) {
  // Создаем копию для безопасных изменений
  const modifiedUser = { ...user, name: 'Новое имя' };
  
  return <div>{modifiedUser.name}</div>;
}

3. Упрощение отладки

Иммутабельность упрощает отладку и понимание потока данных:

// Легко отследить, откуда пришли данные
function UserCard({ user, onEdit }) {
  // Мы точно знаем, что user пришел сверху и не изменится внутри компонента
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={() => onEdit(user)}>
        Редактировать
      </button>
    </div>
  );
}

4. Повышение производительности

React использует сравнение ссылок для оптимизации рендеринга:

// React может эффективно сравнивать props
function ExpensiveComponent({ data }) {
  // Если ссылка на data не изменилась, компонент не перерендерится
  const processedData = useMemo(() => {
    return data.map(item => processItem(item));
  }, [data]);
  
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
 
// Если бы props были мутабельны, React не мог бы полагаться на сравнение ссылок

Как правильно работать с props

1. Чтение props

Компоненты могут свободно читать props:

// Функциональный компонент
function WelcomeMessage({ name, greeting = 'Привет' }) {
  return <h1>{greeting}, {name}!</h1>;
}
 
// С деструктуризацией и значениями по умолчанию
function UserCard({ 
  user: { name, email, avatar }, 
  showAvatar = true,
  onEdit = () => {} 
}) {
  return (
    <div className="user-card">
      {showAvatar && <img src={avatar} alt={name} />}
      <h2>{name}</h2>
      <p>{email}</p>
      <button onClick={onEdit}>Редактировать</button>
    </div>
  );
}

2. Передача props

Родительские компоненты передают данные через атрибуты:

function App() {
  const userData = {
    name: 'Александр',
    email: 'alex@example.com',
    avatar: '/avatar.jpg'
  };
  
  const handleEdit = (user) => {
    console.log('Редактирование пользователя:', user);
  };
  
  return (
    <div>
      {/* Передача отдельных props */}
      <WelcomeMessage name="Анна" greeting="Здравствуйте" />
      
      {/* Передача объекта как spread */}
      <UserCard 
        user={userData} 
        showAvatar={true}
        onEdit={handleEdit}
      />
      
      {/* Использование spread оператора */}
      <UserProfile {...userData} />
    </div>
  );
}

3. Работа с изменяемыми данными

Когда нужно изменить данные из props, используйте состояние:

// ❌ Неправильно
function Counter({ initialValue }) {
  let count = initialValue; // ❌ Локальная переменная не будет обновляться
  
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => count++}> {/* ❌ Не работает */}
        Увеличить
      </button>
    </div>
  );
}
 
// ✅ Правильно
function Counter({ initialValue }) {
  const [count, setCount] = useState(initialValue);
  
  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Увеличить
      </button>
    </div>
  );
}

Практические примеры

1. Работа с объектами и массивами в props

// ❌ Неправильно - мутирование объекта из props
function TodoItem({ todo, onUpdate }) {
  const toggleComplete = () => {
    // todo.completed = !todo.completed; // ❌ Не мутируйте props!
    onUpdate(todo);
  };
  
  return (
    <div className={todo.completed ? 'completed' : ''}>
      <span>{todo.text}</span>
      <button onClick={toggleComplete}>
        {todo.completed ? 'Отменить' : 'Завершить'}
      </button>
    </div>
  );
}
 
// ✅ Правильно - создание нового объекта
function TodoItem({ todo, onUpdate }) {
  const toggleComplete = () => {
    // Создаем новый объект с обновленным значением
    const updatedTodo = { ...todo, completed: !todo.completed };
    onUpdate(updatedTodo);
  };
  
  return (
    <div className={todo.completed ? 'completed' : ''}>
      <span>{todo.text}</span>
      <button onClick={toggleComplete}>
        {todo.completed ? 'Отменить' : 'Завершить'}
      </button>
    </div>
  );
}

2. Children props

Особый вид props — children, который содержит содержимое компонента:

// Компонент, который оборачивает содержимое
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">
        {children} {/* Содержимое переданное между тегами */}
      </div>
    </div>
  );
}
 
// Использование
function App() {
  return (
    <Card title="Мой профиль">
      <p>Это содержимое карточки</p>
      <button>Действие</button>
    </Card>
  );
}

3. Функции как props

Функции часто передаются как props для обратного вызова:

// Компонент кнопки с настраиваемым обработчиком
function CustomButton({ onClick, children, variant = 'primary' }) {
  // Никогда не вызывайте onClick напрямую в теле компонента!
  // onClick(); // ❌ Это вызовет функцию при каждом рендере
  
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick} // ✅ Передаем функцию как обработчик события
    >
      {children}
    </button>
  );
}
 
// Использование
function App() {
  const handleClick = () => {
    console.log('Кнопка нажата!');
  };
  
  return (
    <div>
      <CustomButton onClick={handleClick}>
        Нажми меня
      </CustomButton>
    </div>
  );
}

Распространенные ошибки

1. Попытка изменить props напрямую

// ❌ Неправильно
function UserProfile(props) {
  props.name = 'Новое имя'; // ❌ Ошибка!
  return <div>{props.name}</div>;
}
 
// ✅ Правильно
function UserProfile({ name }) {
  const [localName, setLocalName] = useState(name);
  return (
    <div>
      <span>{localName}</span>
      <button onClick={() => setLocalName('Новое имя')}>
        Изменить
      </button>
    </div>
  );
}

2. Мутирование объектов и массивов

// ❌ Неправильно
function TodoList({ todos, onTodosChange }) {
  const addTodo = (text) => {
    todos.push({ id: Date.now(), text, completed: false }); // ❌ Мутирование!
    onTodosChange(todos);
  };
  
  return (
    <div>
      {todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
      <button onClick={() => addTodo('Новая задача')}>
        Добавить
      </button>
    </div>
  );
}
 
// ✅ Правильно
function TodoList({ todos, onTodosChange }) {
  const addTodo = (text) => {
    const newTodos = [...todos, { id: Date.now(), text, completed: false }]; // ✅ Новый массив
    onTodosChange(newTodos);
  };
  
  return (
    <div>
      {todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
      <button onClick={() => addTodo('Новая задача')}>
        Добавить
      </button>
    </div>
  );
}

Резюме

Props — это данные, передаваемые от родительского компонента к дочернему в React, которые являются иммутабельными по дизайну:

✅ Почему props иммутабельны:

Обеспечивают однонаправленный поток данных
Предотвращают побочные эффекты
Упрощают отладку и тестирование
Повышают производительность

❌ Что нельзя делать:

Изменять props напрямую
Мутировать объекты и массивы из props
Вызывать функции из props в теле компонента

Ключевые моменты:

Компоненты могут читать props, но не могут их изменять
Для изменения данных используйте состояние (useState)
При работе с объектами и массивами из props создавайте новые копии
Используйте деструктуризацию для удобства работы с props

Понимание иммутабельности props — фундаментальный навык React-разработчика, который помогает писать предсказуемый, поддерживаемый и эффективный код.

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪