Введение в React Hooks

Узнайте, как хуки могут помочь вам создать приложение React

Хуки - это функция, которая будет представлена в React 16.7 и изменит способ написания приложений 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!