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

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

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

import React, { useEffect } from 'react'

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

Используя компоненты класса, вы можете зарегистрировать функцию в 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
      
       setCount(count + 1)}>Click me
       setName(name === 'Flavio' ? 'Roger' : 'Flavio')}>
        Change name
      
    
  )
}

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||.

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