代码之家 › 专栏 › 技术社区 › user6792790

如何使用组件WillReceiveProps模拟useEffect?

reactjs javascript

user6792790 · 技术社区 · 3 年前

我更熟悉功能组件,但我必须修复一些早期构建的类组件。我想做的是,

useEffect(() => {
    if (state1) {
        // do this
        // change state state1 -> false
    }
}, [state1])

类组件中的类似内容。我尝试的是

componentWillReceiveProps = (nextProps) => {
    if (nextProps.state1 !== this.props.state1) {
      if (nextProps.state1) {
          // do this
      } else {
        // revert this
      }
      // update state
      this.setState({ state1: !this.state.state1 });
    }
  }

显然,这很奇怪。但我很困惑,因为 componentWillReceiveProps 接收 prop 作为参数。所以,我不确定我应该如何进入一个状态来检测状态的变化。

有什么帮助吗?

1 回复 | 直到 3 年前

Nicholas Tower 3 年前

您可能想要使用componentDidUpdate,而不是componentWillReceiveProps。 componentWillReceiveProps is going to be removed from react ,而且经常被滥用。

使用componentDidUpdate,您将执行以下操作:

componentDidUpdate(prevProps, prevState) {
  if (this.state.state1 !== prevState.state1) {
    if (this.state.state1) {
      // do this
      // change state state1 -> false
      this.setState({ state1: false });
    }
  }
}

如果您也需要在第一次渲染后运行这些代码,那么您可能需要在componentDidMount中执行类似的代码。

推荐文章