用 useEffect 替换 getDerivedStateFromProps

【问题标题】：Replacing getDerivedStateFromProps with useEffect用 useEffect 替换 getDerivedStateFromProps
【发布时间】：2019-05-16 17:39:51
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你应该检查docs

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

如果您只想在path == 'login' 时使用setLoginStatus(true)，那么使用useEffect 是正确的。

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

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

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

我只是想知道转换为这个是否不会丢失任何东西。

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

也可以看看You Probably Don't Need Derived State

还有here

【讨论】：