Я начал работать с ReactJS (далее React) в 2019 году, в самом начале моего бакалавриата по компьютерной инженерии, и с тех пор я стал большим поклонником всего, что он дает.

Введение

Прежде чем мы начнем, я хочу просто повторить, что такое React и что он делает.

Согласно определению в официальной документации, React - это управляемая компонентами интерфейсная библиотека JavaScript для создания пользовательских интерфейсов.

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

  1. на основе компонентов. Для обработки сложных пользовательских интерфейсов рабочий процесс React разбивает все на компоненты, которые затем можно использовать независимо на нескольких экранах / страницах. Компонент может быть таким же простым, как кнопка или полноценная текстовая область, но по своей сути он может независимо управляться React.
  2. библиотека: React - это библиотека JavaScript, не путайте ее с средой выполнения или язык программирования сам по себе. Он предоставляет простой API, который можно использовать через JavaScript для доступа ко всем функциям, которые может предложить React.
  3. Пользовательские интерфейсы. React начинался только как интерфейсный фреймворк и в основном остается прежним. Но сообщество разработало полноценный Маршрутизатор для обработки маршрутизации на стороне клиента и сложных менеджеров состояний, таких как Redux, который позволяет легко создавать полнофункциональные веб-приложения на основе React.

Функциональные компоненты

А теперь давайте углубимся в тему. React представил Функциональные компоненты / компоненты без сохранения состояния в React v14, которые в то время считались революционными.

Он имел ряд существенных преимуществ по сравнению с основными компонентами на основе классов, а именно:

  1. Они были чище и гораздо менее многословными.
  2. Они избегали иногда разочаровывающих this привязок.
  3. У них был четкий синтаксис для рендеринга компонента с помощью простого return

Все эти преимущества были огромными, но одна вещь мешала идеальной адаптируемости функциональных компонентов, а именно, они не могли использовать Состояние. :(

В двух словах, State - это объект или значение, отслеживаемое компонентом в React. Повторный рендеринг этого компонента происходит при изменении состояния. Состояние определяется для каждого компонента индивидуально.

Звучит полезно, правда? Это. Компоненты на основе классов легко позволяли использовать State с объектом state, определенным в их constructor. Но недавно представленные функциональные компоненты не могли его использовать.

Это тоже было запланировано. Функциональные компоненты были введены для обеспечения более простого синтаксиса для простых компонентов, для которых такие сложности, как «Состояние» и «this-binding» и т. Д., Были излишними.

Но сообщество хотело расширить их использование. Они хотели, чтобы разработчики использовали более простой синтаксис, предлагаемый функциональными компонентами, вместе с полноценными функциями React, предлагаемыми в компонентах на основе классов, и поэтому в React v16.8 хуки были введены, которые изменили игру, реализовав именно это.

Крючки

Так что же такое крючки?

Хуки - это функции, которые позволяют «подключаться к» функциям состояния и жизненного цикла React функциональных компонентов.

Звучит просто? В основном это функции, которые можно использовать внутри функциональных компонентов (только). А затем предоставьте функциональные возможности, которые раньше могли использоваться только компонентами на основе классов.

Некоторые важные моменты о крючках

  1. Они предоставляются как именованные экспорты в модуле / пакете react.
  2. Их можно использовать только в функциональных компонентах, но не в компонентах на основе классов.
  3. Они начинаются с префикса «использование», например. useState, useReducer и т. Д.
import React, {useState, useContext} from 'react'

Это также привело к серьезным изменениям в соглашении об именах. Функциональные компоненты ранее назывались компонентами без сохранения состояния. Но поскольку крючок useState позволял использовать в них «состояние». Их больше не называют этим именем. (начиная с React v16 +)

Хук useState

Надеюсь, теперь вы немного освежили свои знания о React, компонентах и ​​хуках. Итак, давайте погрузимся в самый важный крючок - крючок useState.

Использование :

//import signature
import React, {useState} from 'react';
/*
1. Called with a single value which will be used the initialize the state variable.
2. Returns 
    a> a variable which will be tracked as state
    b> a function used to change value of that variable and 
       re-render the component(if changed)
  as an array which should be de-structured as a good practice. 

eg:
*/
const CounterApp = (props) => {
  const [count, setCount] = useState(1);
  return(
    <div>
      Current Count is : {count}
    </div>
  )
}

В приведенном выше примере показан простой вариант использования ловушки useState для создания приложения-счетчика, в котором текущий счетчик управляется «состоянием».

Глубоко:

  1. count: [State-Variable] Эта переменная теперь будет использоваться для отслеживания состояния. Он будет инициирован с целым числом 1 при монтировании компонента. Все дальнейшие изменения, внесенные в состояние, можно получить с помощью этой переменной. Его можно назвать как угодно, и он не имеет особого синтаксиса именования.
  2. setCount: [State-Updater] Это похоже на setState() API. И используется для непосредственной установки новых значений состояния. Необязательно иметь имя, подобное переменной состояния, но рекомендуется вместе с префиксом «установить».

Простое приложение счетчика будет выглядеть (фрагмент кода):

Лучшие Лрактики для UseState

  1. Всегда создавайте несколько useState вызовов для отслеживания нескольких значений как состояния, т.е. используйте ловушку для каждого отдельного значения вместо создания одного объекта с этими значениями и отслеживания его в целом. что значит
// Avoid:
const [stateObject, setStateObject] = useState({ key1: value1, key2: value2})
// Instead
const [key1, setKey1] = useState(value1);
const [key2, setKey2] = useState(value2);

Это потому, что форсировка state-updater заменяет предыдущее состояние новым переданным значением, в отличие от setState(). То есть весь stateObject будет перезаписан, если вы передадите новое значение в setStateObject.

// Initial
stateObject: {
  key1: value1,
  key2: value2
}
// Use of state-updates
setStateObject({ key1: newValue1 })
// New updated state
stateObject: {
  key1: newValue1
}

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

2. Всегда следуйте стандартизированным соглашениям об именах (упомянутых выше) при создании переменных состояния или использовании любого хука в этом отношении.

Надеюсь, этим я смог расширить ваши знания, охватив все сценарии использования ловушки useState. Я напишу больше о других хуках в будущих публикациях. Быть в курсе!

Удачного кодирования!