Что такое useState Hook в React с примерами — Дневник разработчиков

В сегодняшней статье мы узнаем о хуках react useState() с контрпримером. Я знаю, что счетчик очень простой пример, но вы легко поймете этот пример. Все начинают только с этого примера :).

Что такое состояние использования?

React useState() — это встроенный хук или функция, которая поставляется с библиотекой React. Если вы хотите использовать «useState», вам необходимо сначала импортировать его в свое приложение, используя следующий пример кода.

import { useState } from "react";

useState() работает только с функциональными компонентами. Это не будет работать с компонентами класса в React.

useState() возвращает пару значений. Первый параметр массива — это значение текущего состояния. Второй параметр — это функция, которую вы можете использовать для обновления значения состояния.

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

import React, { useState } from 'react'; 
function Example() { // Declare a new state variable, which we'll call "count" const [counter, setCounter] = useState(0);

Мы объявляем переменную состояния с именем counter и устанавливаем для нее значение по умолчанию 0. React запоминает свое текущее значение между рендерами и предоставляет нашей функции самое последнее и обновленное значение. Если мы хотим обновить текущий счетчик, мы можем вызвать setCounter.

Когда мы хотим отобразить текущий счетчик в функции, мы читаем напрямую{ counter

<p>You clicked {counter} times</p>

Полный пример

import React, { useState } from 'react';  
function Example() {     
    const [counter, setCounter] = useState(0);     
    return (     
        <div>         
          <p>You clicked {counter} times</p>        
          <button onClick={()=> setCount(counter + 1)}> 
              Click me
          </button>
        </div>
    ); 
}

Мы импортируем хук React useState. Это позволяет нам сохранять локальное состояние в функциональном компоненте.

Внутри примера компонента мы объявляем новую переменную состояния, вызывая хук useState. Он возвращает пару значений, которые мы называем. Мы называем нашу переменную count, потому что она содержит количество нажатий кнопки.

Мы инициализируем его нулем, передавая 0 в качестве единственного аргумента useState. Второй возвращаемый элемент сам по себе является функцией. Это позволяет нам обновлять счетчик, поэтому назовем его setCounter.

Когда пользователь нажимает, мы вызываем setCount с новым значением. Затем React повторно отображает образец компонента и передает ему новый счетчик.

Get More Hook Статью по теме посетите www.developerdiary.in

Оригинал статьи опубликовать здесь ›› 🤟 🤘 🤙🙏🏼

Подробнее : Что такое хук UseState в React на примере

Не стесняйтесь Подписаться, чтобы получить больше контента 🔔, аплодировать 👏🏻 и поделиться статьей с кем угодно.