Как использовать хук useState React

Посмотри мойВведение в React Hooksво-первых, если вы новичок в них.

Чаще всего я использую один крючок React:useState.

import React, { useState } from 'react'

С использованиемuseState()API, вы можете создать новую переменную состояния и иметь способ ее изменить.useState()принимает начальное значение элемента состояния и возвращает массив, содержащий переменную состояния и функцию, которую вы вызываете для изменения состояния. Поскольку он возвращает массив, мы используемдеструктуризация массивадля доступа к каждому отдельному элементу, например:const [count, setCount] = useState(0)

Вот практический пример:

import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘app’))

Вы можете добавить столькоuseState()вызовы, которые вы хотите, чтобы создать столько переменных состояния, сколько хотите. Просто убедитесь, что вы вызываете его на верхнем уровне компонента (а не вifили в любом другом блоке).

Пример на Codepen:

См. ПероReact Hooks, пример # 1 счетчикАвтор: Флавио Коупс (@flaviocopes) наCodePen.