В чем разница между state и props в React?

React — это популярная библиотека JavaScript для создания пользовательских интерфейсов. Одними из основных концепций в React являются props и state. Эти две концепции часто вызывают вопросы у начинающих разработчиков, поэтому важно понять их различия и использование.

Props (пропсы)

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

Пример использования props:

function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}

function App() {
  return <Welcome name="Алиса" />;
}

В этом примере Welcome компонент получает name в качестве prop и использует его для отображения приветствия.

State (состояние)

State — это состояние компонента, которое может изменяться со временем. State управляет данными, которые изменяются в ответ на действия пользователя, сетевые ответы и т.д. Изменение state приводит к перерисовке компонента. В отличие от props, state управляется и изменяется внутри самого компонента.

Пример использования state:

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

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Счет: {this.state.count}</h1>
        <button onClick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

В данном примере, Counter компонент использует state для отслеживания текущего значения счёта, и предоставляет механизм (increment метод) для его изменения.

Основные различия

• Иммутабельность: Props неизменяемы в том компоненте, где они используются, в то время как state может быть изменен.
• Владение: Props передаются от родительского компонента, а state управляется самим компонентом.
• Использование: Props используются для настройки компонентов и передачи статических или динамических данных между ними. State используется для данных, которые должны изменяться в ответ на дейcтвия пользователя или системные события.

Понимание и правильное использование props и state важны для эффективной работы с React и создания интерактивных пользовательских интерфейсов.