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

Узнайте, для чего полезен хук 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.

Tech Wiki Online!