如何在React Hooks中使用componentWillMount（）？

如何在React Hooks中使用componentWillMount（）？

你不能使用任何现有的生命周期方法（

componentDidMount

，

componentDidUpdate

，

componentWillUnmount

在钩等）。它们只能在类组件中使用。并且使用挂钩，您只能在功能组件中使用。下面的行来自React文档：

如果你熟悉阵营类生命周期方法，你能想到的

useEffect

钩。因为

componentDidMount

，

componentDidUpdate

和

componentWillUnmount

结合。

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

componentDidMount

安装组件时，内部代码运行一次。

useEffect

钩子等效于此行为是

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

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

如果没有第二个参数 ，

useEffect

则会在每次渲染组件时调用该钩子，这很危险。

useEffect(() => {  // Your pre 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', () => {})  }}, [])