Вопросы от новичка по state?

Question

[AlinaCat]

Читаю туториалы, с props все понятно, а вот зачем нужен state не пойму до конца

1) в чем его смысл, если в одном предложении написать? Т.е. понятно, что держать актуальные данные, но тогда не вижу разницы с обычным state объектом в нативном js, который можно создать для таких же целей самому.
2) у компонента всегда есть объект state? В одном месте написано, что всегда, в другом - есть stateless компоненты.

Comments

[Илья Солдатенков]

1. State используется там, где ожидаются изменения каких-либо данных.
2. Компоненты делятся на stateful и stateless, умные и глупые. Так вот компонент со стейтом является умным, а без - глупым. Например - у вас есть компонент параграфа, это чисто стилистический компонент, который принимает пропс с текстом и отображает его, а есть родительский компонент - список элементов, в котором присутствует фильтр и например, поиск и такой компонент содержит обычно в себе стейт. Как писали выше, изменение стейта перерисовывает компонент.

Answer 1

[Андрей Охотников]

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

Comments

[AlinaCat]

Функциональный компонент не может иметь стейта в приницпе?

и насколько понмю при имзенении пропсов тоже ререндеринг происходит, верно?

[Андрей Охотников]

AlinaCat, да, ререндер происходит также при изменении пропсов. До недавнего времени функциональные компоненты не имели стейта, но в этом месяце вышла версия React 16.8 и теперь возможно все благодаря react hooks

Answer 2

[Павел Корнилов]

AlinaCat , это разные подходы написания компонентов.
Если писать в современном ООП - state будет всегда. Он хранит в себе текущее состояние отслеживаемых параметров.
В stateless стиле пишется уже с использованием функций-конструкторов.

Answer 3

[Anton Filippov]

1) В одном предложении, стейт, как и в переводе - это внутреннее состояние компонента. Например, у вас есть компонент лампочка. Вы можете в его состоянии хранить свойство включена/выключена.
Да, вы можете это состояние передавать лампочке как prop, но это означает, что вы будете хранить состояние где-то выше(если вы хотите, чтобы включение/выключение можно было совершить не правя код, через интерфейс).
В различных ситуациях может понадобиться оба подхода.

2) Стейт есть не всегда. Он и не всегда нужен. Когда он не нужен компонент можно написать просто как функцию. Когда он нужен, можно использовать хуки, и можно(но уже во многих случаях необязательно/нежелательно) использовать классы.

Comments

[AlinaCat]

Сколько часов у вас заняло освоить хуки и надо ли их уже знать джуниору в React?

[Anton Filippov]

AlinaCat, я их освоил ещё до релиза, там очень простое апи, но теперь вот когда вижу в своих проектах классы, почти всегда переписываю на компонент с хуками.

Посмотрите представление от Дана Абрамова, там всё очень понятно https://youtu.be/V-QO-KO90iQ?t=563

Нужно ли знать джуниору? Лишним не будет, уделить один вечер на изучение определённо оправдано :)