@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, который позволяет создавать функциональные компоненты с внутренним состоянием и реагировать на пользовательский ввод и другие действия.