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

  • Z时代
  • 2024-01-10
  • 分类：问答

在React的官方文档中，它提到-

如果您熟悉React类的生命周期方法，则可以将useEffect

Hook视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

我的问题是-我们如何componentWillMount()在钩子中使用lifecyle方法？

回答：

你不能使用任何现有的生命周期方法（componentDidMount，componentDidUpdate，componentWillUnmount在钩等）。它们只能在类组件中使用。并且使用挂钩，您只能在功能组件中使用。下面的行来自React文档：

如果你熟悉阵营类生命周期方法，你能想到的useEffect钩。因为componentDidMount，componentDidUpdate和componentWillUnmount结合。

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

安装组件时，内部代码运行一次。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', () => {})
  }
}, [])

以上是 如何在React Hooks中使用componentWillMount（）？ 的全部内容， 来源链接： utcz.com/qa/436335.html

回到顶部