Как использовать крючок реакции состояния пользователя

Сначала ознакомьтесь с моим введением в React hooks, если вы новичок в них.

Один из реактивных крючков, который я чаще всего использую, – это пользовательское состояние .

import React, { useState } from 'react'

Используя API use State() , вы можете создать новую переменную состояния и иметь возможность изменить ее. используйте State() принимает начальное значение элемента состояния и возвращает массив, содержащий переменную состояния и функцию, которую вы вызываете для изменения состояния. Поскольку он возвращает массив, мы используем разрушение массива для доступа к каждому отдельному элементу, например: const [count,(0)

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

import { useState } from 'react'

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>Click me
    
  )
}

ReactDOM.render(, document.getElementById('app'))

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

Пример на Codepen:

Видишь ручку || Реагировать на счетчик примеров #1 || Флавио Копеса (|| @flaviocopes ||) на ||CodePen ||.

Оригинал: “https://flaviocopes.com/react-hook-usestate/”