Learn React useState in 2024 (Plain & Simple)

Использование `useState` — это первый редкий прием, который вам нужно освоить. В этом видео мы рассмотрим, почему мы должны его использовать, как мы можем его использовать и некоторые продвинутые методы. Давайте начнем с того, почему пользователи регулярно взаимодействуют с нашими приложениями: они могут отправлять формы, сохранять свои предпочтения и многое другое. В результате компоненты, которые мы пишем, должны помнить об этих вещах. В React мы используем хук `useState` для достижения этой цели. В JavaScript у нас есть переменные для хранения состояний, поэтому не используйте обычный JavaScript. Давайте посмотрим на следующий код. У нас есть компонент галереи, который отображает автомобиль, используя его индекс. У нас также есть кнопка с обработчиком `onclick`. Функция обработки клика увеличивает индекс на единицу. Что произойдет, если я нажму кнопку «Далее»? Увидим ли мы следующее изображение? Ничего не происходит. Это потому, что React не знает, что нужно перерисовать компонент. Мы должны сообщить React и сказать: « Эй, я хочу, чтобы ты перерисовал этот компонент, что-то изменилось». Вот почему мы должны использовать хук `useState`. Но почему наш компонент работает неправильно? Давайте сначала это исправим. Нам нужно импортировать ` useState` и заменить нашу переменную `index`. Давайте рассмотрим каждую часть. Здесь мы выполняем деструкцию массива. С помощью деструкции массива мы можем распаковать Значения из массивов. Первая переменная называется Index. Это наше текущее состояние, которое мы будем использовать для вычислений. Вторая переменная — setIndex. Это функция для обновления переменной index. Обычно вторая переменная имеет префикс set. Функция useState принимает состояние по умолчанию, здесь мы передаем ноль. Наконец, нам нужно обновить нашу функцию обработки 100 кликов. Теперь, когда я нажимаю кнопку, вы видите, что компонент галереи отображается, и изображение меняется. Давайте посмотрим, что происходит при первом отображении компонента. React смотрит на параметр useState и видит ноль, поэтому он возвращает это. Затем мы нажимаем кнопку и вызываем эту функцию. React знает, что индекс равен нулю, поэтому выражение превращается в это. Когда мы вызываем функцию setIndex, мы запускаем рендеринг. React запоминает последний вызов setIndex, который равен единице, поэтому он возвращает это и так далее. У вашего компонента может быть столько состояний, сколько вы хотите, однако для удобства сопровождения кода важно свести их к минимуму. Когда вы говорите о компоненте подобным образом, может быть сложно понять, что происходит. Еще один важный момент: состояние является приватным для этого компонента, если мы используем один и тот же компонент. Каждое устройство будет иметь своё собственное состояние. Здесь мы отображаем две галереи, и нажатие кнопки «Далее» на одной не влияет на другую. Давайте рассмотрим более сложные вещи. Мы узнали, что можем обновлять наше состояние с помощью функции `set`. Здесь нам нужно знать текущее значение индекса. Однако есть и другой способ доступа к текущему состоянию — мы можем использовать функцию `updator`. Если мы передадим функцию функции `setIndex`, первым параметром будет текущий индекс. Мы можем использовать его в наших вычислениях. Возвращаемое значение будет состоянием при следующем рендеринге. Если это звучит запутанно, это потому, что мы используем сокращенный способ создания функции. Мы можем сделать это и более длинным способом: ` setIndex` вызывает функцию с текущим состоянием. Это может пригодиться, когда вы хотите передать только функцию `set` в качестве свойства. Если вы вызовете `setIndex` три раза, что, по-вашему, произойдет после нажатия кнопки? Значение индекса будет только единицей, а не тремя. Это потому, что функция `set` не обновляет переменную индекса в уже работающем коде. Если вам все же нужно обновить ее три раза, вы можете использовать функцию `updator`. React помещает их в очередь, и при следующем рендеринге вызывает их в том же самом месте. В порядке очередности вы можете хранить объект с помощью `useState`, но не пытайтесь обновлять его таким образом. Вместо этого всегда используйте функцию `set`. Если вы используете функцию для создания состояния по умолчанию, вы можете оптимизировать её, передавая ссылку. Хотя React учитывает состояние по умолчанию только при первом рендеринге, при каждом последующем рендеринге эта функция всё равно вызывается. Это может негативно сказаться на производительности, если функция потребляет много ресурсов. Чтобы это исправить, мы можем передать саму функцию в качестве аргумента. Таким образом, React вызовет функцию только один раз во время первоначального рендеринга. Есть ещё много чего узнать о `useState`, однако я не могу уместить всё это в одном видео. Если у вас есть вопросы, оставьте комментарий ниже, и я вам помогу. Если вам понравилось видео, пожалуйста, подпишитесь, так как у меня сейчас ноль подписчиков. Спасибо за просмотр!