props vs state

С тех пор как мы начали использовать React для перестройки наших UI на uberVU (сейчас Hootsuite) вопросом разработчика №1 вероятно был:

В чем же все-таки разница между props и state?

Разницу довольно просто понять если рассматривать их в контексте, но концептуально понять это будет все-таки сложно.

Контекст

Основной задачей Компонента является перевод необработанных данных в полноценный HTML-код. С учетом этого, props и state вместе представляют необработанные входные данные в HTML.

Можно сказать, что props + state это входные данные для функции Компонента render(), поэтому чтобы понять откуда и что берется нам необходимо рассматриваемые одновременно и другие элементы.

Посколько мы используем Cosmos, где props может содержать первоначально значение (initial state), рассмотрение этого вопроса является очень важным.

Точки пересечения

Перед тем, как мы начнем разделять props и state, давайте определим где они взаимодействуют друг с другом.

  • props и state обычные объекты JS.
  • props и state инициируют выполнение функции render.
  • props и state являются предопределенными. Если с одним и тем же надобром props и state в Компоненте вы получаете различные выходные данные, то что-то сделано неправильно.

Does this go inside props or state?

Если Компонент должен изменить один из своих атрибутов в какой-то момент времени, этот атрибут должен быть частью state этого Компонента, в противном случае он должен быть просто prop для него.

props

props (сокр. от properties) является конфигурацией Компонента, или настройками (options) если сказать другими словами.

Компонент не может изменять свой props, но он может отвечать за изменение props своих дочерних Компонентов.

state

state появляется с установки его значения по умолчанию в момент "монтирования" компонента и потом допускает свое изменение со временем (в основном от пользовательских событий). Это серриализуемое* представление в состояния компонента в определенный момент времени.

Компонент сам управляет своим собственным состоянием изнутри, но, помимо установки первоначального состояния, не управляет состоянием своих дочерних Компонентов.

Можно сказать, что state является приватным параметром.

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