Question

我阅读了“使用效果挂钩”文档，但是我仍然很难清除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 (...) }
}

Answer 1

传递给useEffect的函数可能会返回清除函数。清除函数在从UI上删除组件之前运行，以防止内存泄漏。此外，如果一个组件渲染多次（通常如此），则在执行下一个效果之前会清除上一个效果。

在您的情况下，由于需要根据从props传递的ID调用handlePopAlert函数，因此只要更改id, ttl并为其传递 second参数，就需要运行效果到useEffect作为ID和ttl

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

  return (...)
}

React Hooks setTimeout和clearTimeout

1 个答案: