Что такое хук useState в React

Здравствуйте, программисты! В этой статье я расскажу о новой технологии, которая используется в веб-дизайне. Вам, как веб-разработчику, это необходимо, если вы используете React. Начнем с самого начала ……

Вы когда-нибудь использовали функцию состояния в React?

Не волнуйся. Позвольте мне показать простой пример, не используя ничего особенного. Иногда вам знаком этот код. Это приложение предназначено для увеличения и уменьшения значения переменной count при нажатии соответствующей кнопки.

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

Что за крючок?

Хуки - это новая функция, представленная в версии React 16.8. В React он позволяет использовать состояние, эффекты и другие функции реакции без использования классов.

Хуки не являются базовым компонентом класса. Это функциональный базовый компонент. Когда мы используем хуки, нужно соблюдать некоторые правила.

Хотите прочитать эту историю позже? Сохранить в Журнал.

01) Вызывайте ловушки только на верхнем уровне. Не вызывайте ловушки внутри циклов, условий или вложенных функций.

02) Вызов хуков только из функций React. Вы не можете вызывать хуки из обычных функций JavaScript. Вместо этого вы можете вызывать хуки из компонентов функции React.

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

Что такое ловушка useState?

Hook - это специальная функция, которая позволяет вам «подключиться» к функциям React. Например, useState - это перехватчик, который позволяет добавлять состояние React к функциональным компонентам.

Для вашего пояснения я получил приведенный выше пример и закодировал его с помощью react useState react hook.

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

Класс VS Функция

Это пример компонента реакции на основе классов, который я использовал в первом сегменте кода (рисунок I).

class App extends React.Component {
render() {
      return (
         //you can code what would you return
)
}
}

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

function App() {
     return (
           //you can code what would you return
     )
}

Объявление переменной состояния

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

В компонентах класса мы должны объявить переменную count и сохранить 0, установив для this.state значение {count: 0} в конструкторе.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {     
     count: 0    
};  
}

Затем мы можем сравнить разницу между базовым компонентом перехвата функции и базовым реакционным компонентом класса. Перед тем, как использовать ловушку useState, мы должны импортировать зависимость useState, подобную этой.

import React, { useState } from 'react';

function Example() {
       [count, setCount] = useState(0);
}

Почему мы передаем аргумент в функции useState

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

[count, setCount] = useState(0);

начальное значение - 0, (count = 0).

Другой пример,

[name, setName] = useState("vickey");

это также начальное значение имени переменной.

«Vickey» - это начальное значение переменной с именем name.

Почему есть две переменные: count и setCount

Обычно, когда мы вызываем функцию useState, она возвращает пару значений . Поэтому мы объявляем 2 переменные для хранения текущего значения (count) и обновленного значения (setCount).

Обновление состояния

В компоненте на основе классов это способ обновления значения переменной (рисунок I).

count: this.state.count + 1,//it's like count=count + 1

Далее мы расскажем, как обновить значение в функциональном компоненте с помощью перехвата реакции.

Например, если мы хотим добавить 1 к счетчику. Тогда код должен быть таким (рисунок II).

setCount(count + 1)

Если начальное значение счетчика равно 0, то после этого сегмента кода значение счетчика равно 1.

Другой пример,

setName("john")

если начальное значение имени - «vickey», то после сегмента кода значение имени - «john».

Для идеального и удобочитаемого целевого кодирования я выполнил этот процесс обновления с помощью отдельных функций, таких как increamentHandler и increamentHandler, для уменьшения и увеличения значения переменной count в моих примерах.

Я думаю, вы лучше понимаете, о чем идет речь.

О чем мы говорили.

→ Написал простой пример знакомого без использования каких-либо специальных технологий.

→ разработать тот же код с помощью хука response useState

→ Сравнение

1) Класс против функции в React

2) Объявите переменную состояния для обеих фигур

3) Инициализация переменных с помощью useState

4) Обновить переменные в реакции с помощью хуков

В своем следующем блоге я расскажу о другом хуке реакции под названием «useEffect». Оставайтесь на связи с моими блогами. Удачного вам подключения …… !!!!!

📝 Сохраните этот рассказ в Журнале.