Question

我正在尝试为我的componentDidMount实现useEffect，但是我不知道在这种情况下该怎么做：

 componentDidMount() {
    logNavego(this.props.history.location.pathname + 
    this.props.history.location.search )
    this.unlisten = this.props.history.listen(location => {
      logNavego(location.pathname + location.search)
    })
  }

Answer 1

尝试这个。

import React, { useEffect } from 'react';

useEffect(() => {
  // all your code that you put in  componentDidMount method
}, [])

在useEffect中，我们正在使用[]。 []与componentDidMount类似。

现在，如果要使用componentDidUpdate，则需要在[]中传递状态。

例如如果那时count是更新的，那么您想更改任何内容，请参见此代码。

useEffect(() => {
  // all your code goes here related to count state.
}, [count])

因此上述代码将在计数改变时触发重新渲染，否则将不会调用。

Answer 2

由于您只希望在初始渲染时调用history.listen并在卸载时清理监听器，因此可以将useEffect作为依赖项数组调用empty array并返回清理函数

useEffect(() => {
    logNavego(props.history.location.pathname + props.history.location.search )
    const unlisten = props.history.listen(location => {
      logNavego(location.pathname + location.search)
    });
    return () => {
       unlisten();
    }
  }, [])

您可以参考 http://xsltfiddle.liberty-development.net/gWvjQfo 了解更多详情

如何使用react-router实现componentDidMount的钩子？

2 个答案: