javascript - 用 useEffect 替换 getDerivedStateFromProps

Question

我正在将一个类组件转换为一个函数组件，并想看看 useEffect()可以替换以下静态函数

static getDerivedStateFromProps(props) {
    const { path } = props.match;
    if (path === '/login') {
      return { loginStatus: true };
    } else {
      return { loginStatus: false };
    }
  }

以下是新的替换功能。它正在做它应该做的事情，即根据 Prop 改变状态，但我对 useEffect() 不太熟悉，我只是想知道转换为这个是否不会丢失任何东西。

const { path } = props.match
useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

Answer 1

您应该检查 docs

您可以拥有先前 path 的状态和当前 path并且只调用setLoginStatus当它们不同时。

如果你只想setLoginStatus(true)当path == 'login'然后使用 useEffect是正确的。

这部分代码只有在 path 时才会运行。变化。发生这种情况是因为 [ path ] .

useEffect(() => {
    if (path ==='/login'){
        setLoginStatus(true)
    } else {
    setLoginStatus(false)
    }
}, [ path ])

如果你使用一些路由器，你的效果可能只会在初始渲染中运行。

I'm just wondering if I'm not losing anything by converting to this.

不，没关系，你应该这样做

也看看 You Probably Don't Need Derived State

和 here