如何在React钩子中使用componentWillMount（）？

Question

在React的官方文件中提到-

如果您熟悉React类生命周期方法，那么可以将useEffect钩子看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。

我的问题是--我们如何在钩子中使用componentwillmount()生命周期方法？

Answer 1

不能在钩子中使用任何现有的生命周期方法(componentdidmount、componentdidupdate、componentwillunmount等）。它们只能在类组件中使用。和钩子,您只能在功能组件中使用。下面一行来自React文档：

如果您熟悉React类生命周期方法，可以将UseEffect钩子看作ComponentDidMount、ComponentDidUpdate和ComponentWillUnmount组合。

建议是，您可以从类组件中模仿这些生命周期方法的一个功能组件。

componentdidmount中的代码在组件装入时运行一次。此行为的useEffect钩子等价物是

useEffect(() => {
  // Your code here
}, []);

注意这里的第二个参数（空数组）。这将只运行一次。

如果没有第二个参数，useEffect钩子将在组件的每个呈现中调用，这可能是危险的。

useEffect(() => {
  // Your code here
});

componentwillunmount用于清理（例如删除事件侦听器、取消计时器等）。假设您正在componentdidmount中添加事件侦听器，并在componentwillunmount中删除它，如下所示。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

以上代码的钩子等价物如下所示

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])