我们可以在函数组件中使用生命周期方法吗？反之亦然类组件中的生命周期挂钩？

Question

我们可以在函数组件中使用生命周期方法吗？反之亦然的生命周期是否挂钩类内组件？如果是，如何，请分享任何链接。

Answer 1

是的，您可以借助useEffect钩子在功能组件中使用生命周期方法。

useEffect 钩子可用于复制生命周期行为。例如：

componentDidMount：

componentDidMount() {
  window.addEventListener('unhandledRejection', handler);
}

功能组件等价

useEffect(() => {
    window.addEventListener('unhandledRejection', handler);
}, [])

componentWillUnmount：

  componentWillUnmount() {
    alert('The component is going to be unmounted');
    window.removeEventListener('unhandledRejection', handler);
  }

功能组件等价

useEffect(() => {
    window.addEventListener('unhandledRejection', handler);
    return () => {
       alert('The component is going to be unmounted');
       window.removeEventListener('unhandledRejection', handler);
    }
}, [])

componentDidUpdate：

componentDidUpdate(prevProps, prevState) {
     const { counter } = this.props;
     if (this.props.counter !== prevState.counter) {
      // some action here
     }
}

功能组件等价

useEffect(() => {
     // action here
}, [props.counter]); // checks for changes in the values in this array