Рубрики
Без рубрики

Введение в Реагирующие крючки

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

Hooks – это функция, которая будет представлена в React 16.7 и изменит то, как мы пишем приложения React в будущем.

До появления крючков некоторые ключевые вещи в компонентах были возможны только с использованием компонентов класса: наличие собственного состояния и использование событий жизненного цикла. Функциональные компоненты, более легкие и гибкие, были ограничены в функциональности.

Крючки позволяют компонентам функций иметь состояние и реагировать на события жизненного цикла тоже, и как бы делают компоненты класса устаревшими. Они также позволяют функциональным компонентам иметь хороший способ обработки событий.

Состояние доступа

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

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

import { useState } from 'react'

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

  return (
    

      
You clicked {count} times

      
    

  )
}

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

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

Пример на Codepen:

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

Крючки жизненного цикла доступа

Еще одной очень важной особенностью крючков является предоставление функциональным компонентам доступа к крючкам жизненного цикла.

Используя компоненты класса, вы можете зарегистрировать функцию в componentDidMount , Компонент будет монтироваться и componentDidUpdate события, и они будут обслуживать множество вариантов использования, от инициализации переменных до вызовов API для очистки.

Крючки обеспечивают эффект использования() API. Вызов принимает функцию в качестве аргумента.

Функция запускается при первом отображении компонента и при каждом последующем повторном отображении/обновлении. React сначала обновляет DOM, а затем вызывает любую функцию, переданную в использовать эффект() . Все без блокировки рендеринга пользовательского интерфейса даже при блокировке кода, в отличие от старого componentDidMount и componentDidUpdate , что ускоряет работу наших приложений.

Пример:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Flavio')

  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })

  return (
    

      

        Hi {name} you clicked {count} times
      

      
      
    

  )
}

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

То же самое componentWillUnmount задание может быть выполнено опционально возвращением функции из нашего эффекта использования() параметра:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

использовать эффект() можно вызывать несколько раз, что удобно для разделения несвязанной логики (что-то, что мешает событиям жизненного цикла компонентов класса).

Поскольку функции useEffect() выполняются при каждом последующем повторном отображении/обновлении, мы можем указать React пропустить запуск в целях повышения производительности, добавив второй параметр, который представляет собой массив, содержащий список переменных состояния, за которыми нужно следить. React перезапустит побочный эффект только в том случае, если изменится один из элементов в этом массиве.

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

Аналогично, вы можете указать React, чтобы выполнить побочный эффект только один раз (во время монтирования), передав пустой массив:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

используйте эффект() отлично подходит для добавления журналов, доступа к сторонним API и многого другого.

Пример на Codepen:

Видишь ручку || Реагирующие крючки пример #3 побочные эффекты || от Флавио Копса (|| @flaviocopes ||) на ||Codepen||.

Включите межкомпонентную связь с помощью пользовательских крючков

Возможность писать свои собственные хуки – это функция, которая в будущем существенно изменит то, как вы пишете приложения React.

Используя пользовательские крючки, у вас есть еще один способ разделить состояние и логику между компонентами, добавив значительное улучшение в шаблоны реквизитов визуализации и компонентов более высокого порядка. Которые по-прежнему великолепны, но теперь с пользовательскими крючками имеют меньшее значение во многих случаях использования.

Как вы создаете пользовательский крючок?

Крючок – это функция, которая обычно начинается с использовать . Он может принимать произвольное количество аргументов и возвращать все, что захочет.

Примеры:

const useGetData() {
  //...
  return data
}

или

const useGetUser(username) {
  //...const user = fetch(...)
  //...const userData = ...
  return [user, userData]
}

В своих собственных компонентах вы можете использовать крючок следующим образом:

const MyComponent = () => {
  const data = useGetData()
  const [user, userData] = useGetUser('flavio')
  //...
}

Когда именно следует добавлять крючки вместо обычных функций, следует определять на основе вариантов использования, и только опыт покажет.

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

Читайте ещё по теме: