Как использовать хуки состояния в React.js?

@charles.orn 

Хуки состояния (State Hooks) - это механизм в React, который позволяет функциональным компонентам иметь свое внутреннее состояние. Использование хуков состояния дает возможность реагировать на пользовательский ввод, изменение данных или другие действия, происходящие в компоненте.

Чтобы использовать хуки состояния, сначала нужно импортировать функцию useState из библиотеки React:

1

import React, { useState } from 'react';

Затем создайте переменную, которая будет хранить текущее значение состояния, и функцию, которая будет обновлять это значение. Функция useState принимает начальное значение состояния в качестве параметра и возвращает массив с двумя элементами - текущее значение состояния и функцию для его обновления:

1

const [count, setCount] = useState(0);

В этом примере мы создали переменную count, которая хранит текущее значение состояния, и функцию setCount, которая будет обновлять это значение. Начальное значение состояния равно 0.

Теперь мы можем использовать переменную count в нашем компоненте и обновлять ее с помощью функции setCount. Например, мы можем создать кнопку, которая будет увеличивать значение count на 1 при нажатии:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

В этом примере мы создали компонент Counter, который отображает текущее значение count и кнопку, которая вызывает функцию setCount при нажатии. Функция setCount обновляет значение count, увеличивая его на 1.

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