Основы React Hooks, useState Hooks

В этой истории мы рассмотрим все основы перехватчиков реакции и узнаем о встроенном перехвате реакции, называемом useState ().

Предпосылка -

Вы должны знать основы HTML, Javascript, что такое React и как он работает .

И если вы выполните эти условия, тогда все в порядке .

Что такое React Hooks?

• Перехватчики React были представлены в React 16.8 .
• Перехватчики React - это в основном функции, которые позволяют вам обрабатывать состояние веб-приложения и позволяют легко работать с другими функциями React, такими как componentDidMount () , componentDidUpdate (), без написания класса .
• Вы можете использовать перехватчики React только в функциональных компонентах , но не в компонентах, определенных классом.
• Проще говоря, мы можем определить перехватчики реакции как функции, которые позволяют «подключаться» к функциям состояния и жизненного цикла React из функциональных компонентов .
• Есть много типов встроенных хуков React -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

Что такое useState?

• useState - один из самых распространенных и наиболее часто используемых ловушек React.
• useState используется как перехватчики управления состоянием конкретного компонента.
• Хук useState используется для обработки состояния наших компонентов.
• useState позволяет нам легко и удобно создавать и обрабатывать переменные состояния .
• В useState мы устанавливаем начальное состояние переменной состояния и используем функцию, определенную в useState, для изменения этого состояния этой переменной состояния с начального состояния на текущее .
• Мы можем использовать useState только в функциональных компонентах, но не в компонентах на основе классов .
• useState такой же, как this.stateи this.setStateв компонентах на основе классов React .
• Не волнуйтесь, если вы не понимаете состояние и useState должным образом, это будет совершенно ясно в вашей голове, как только вы поймете это на примере кода.

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

• Код -
• Пояснение к коду -
• В строке этого кода мы импортировали useStateловушку из ‘react’.
• После этого мы создадим функциональный компонент, который называется Appв файле App.js.
• В этом функциональном компоненте мы создадим вызываемую переменную состояния count и вызываемую функцию useState setCount.
• В 6-й строке этого кода мы используем хук useState, в котором мы вызываем переменную состояния, count а чтобы изменить состояние этого счетчика, мы создали вызываемую функцию setCount.
• Здесь в useState(0)0 указывается исходное состояние count состояния varibale. Итак, сначала, когда наш компонент приложения загружает, значение count переменной состояния будет 0. И с setCountпомощью метода мы сможем изменить значение count переменной состояния.
• Теперь мы создали метод, decreamentкоторый будет уменьшать count значение переменной состояния на 1 всякий раз, когда мы нажимаем кнопку (уменьшение -) . По сути, этот метод устанавливает состояние countпеременной как count-1using setCountmethod.
• Теперь мы создали вызываемый метод, increamentкоторый будет увеличивать count значение переменной состояния на 1 всякий раз, когда мы нажимаем кнопку (приращение +) . По сути, этот метод устанавливает состояние countпеременной как count+1using setCountmethod.
• В return разделе этого кода нет пояснений, и в кнопке ( инкремент +) мы передали increament метод в onClick событии, а в кнопке (декремент-) мы передали decreamentметод.

Заключение

Итак, в этой статье мы рассмотрели основы хуков React и что такое хуки useState, как они работают и как их реализовать .

Надеюсь, вам понравилось читать и учиться.

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