React Hooks setTimeout и clearTimeout - PullRequest
Новая
       26

React Hooks setTimeout и clearTimeout

0 голосов
/ 07 февраля 2019

Я прочитал документ «Использование Effect Hook», но мне все еще трудно избавиться от побочных эффектов из useEffect hook.В частности, у меня есть этот компонент класса, и я хотел бы узнать, как его можно преобразовать в компонент функции с помощью useEffect hook. 

class Alert extends PureComponent {
  componentDidMount() {
    this.handleSetTimeout()
  }

  componentDidUpdate() {
    this.handleClearTimeout()
    this.handleSetTimeout()
  }

  componentWillUnmount() {
    this.handleClearTimeout()
  }

  handleSetTimeout = () => {
    const { alert: { id, ttl }, handlePopAlert } = this.props
    if (!ttl) return
    this.timeout = setTimeout(() => handlePopAlert(id), ttl)
  }

  handleClearTimeout = () => {
    if (!this.timeout) return
    clearTimeout(this.timeout)
    this.timeout = null
  }

  render() { return (...) }
}

1 Ответ

0 голосов
/ 07 февраля 2019

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

В вашем случае, так как функция handlePopAlert должна вызываться на основе идентификатора, переданного из реквизита, эффект должен запускаться всякий раз, когда изменяется id, ttl, для которого вы передаете второй аргумент вuseEffect как идентификатор и ттл 

const Alert = (props) => {
  const { alert: { id, ttl }, handlePopAlert } = this.props
  useEffect(() => {
    const timeout = setTimeout(() => {
       handlePopAlert(id)
    }, ttl)
    return () => {
       clearTimeout(timeout);
    }
  }, [id, ttl]);

  return (...)
}
...