用 useEffect 替换 getDerivedStateFromProps

Question

我正在将 class 组件转换为函数组件，想看看 useEffect() 是否可以替换以下静态函数

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

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

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

Answer 1

你应该检查 docs

您可以为之前的 path 和当前的 path 设置一个状态，并且仅在它们不同时才调用 setLoginStatus。

如果在 path == 'login' 时只想 setLoginStatus(true) 那么使用 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

用 useEffect 替换 getDerivedStateFromProps

Replacing getDerivedStateFromProps with useEffect

javascript

reactjs

react-hooks