React Hooks setTimeout и clearTimeout
Я прочитал документ «Использование хука эффектов», но мне все еще трудно избавиться от побочных эффектов от хука useEffect. В частности, у меня есть этот компонент класса, и я хотел бы узнать, как его можно преобразовать в функциональный компонент с помощью хука useEffect.
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 (...) }
}
Спасибо! Я проверю это.
Кстати, вы знаете, что вам не нужно очищать this.timeout, поскольку clearTimeout позволяет вам передать идентификатор уже остановленного таймера.
Оооо попался :)
Ответы 1
Функция, переданная useEffect, может возвращать функцию очистки. Функция очистки запускается перед удалением компонента из пользовательского интерфейса, чтобы предотвратить утечку памяти. Кроме того, если компонент визуализируется несколько раз (что обычно и происходит), предыдущий эффект очищается перед выполнением следующего эффекта.
В вашем случае, поскольку функцию handlePopAlert необходимо вызывать на основе идентификатора, переданного из реквизита, эффект должен запускаться всякий раз, когда изменяется id, ttl, для которого вы передаете второй аргумент useEffect как идентификатор и ttl
const Alert = (props) => {
const { alert: { id, ttl }, handlePopAlert } = this.props
useEffect(() => {
const timeout = setTimeout(() => {
handlePopAlert(id)
}, ttl)
return () => {
clearTimeout(timeout);
}
}, [id, ttl]);
return (...)
}
Спасибо. Документы великолепны, но мне нужно было увидеть больше примеров.
Дэн Абрамов недавно опубликовал статью в блоге именно об этом: overreacted.io/making-setinterval-declarative-with-react-hooks