Question

如果我在功能组件中使用 useEffect 钩子，我该如何准确地实现此代码？

 componentDidUpdate(prevProps) {
    if (this.props.user.id !== prevProps.user.id) {
      this.setState({
        isLoggedIn: true,
      });
    }
  }

  componentDidMount() {
    this.props.fetchConversations();
  }

Answer 1

const {fetchConverstaions, user} = props

useEffect(() => {
   fetchConverstaions()
}, [])

useEffect(() => {
   setIsLoggedIn(true) //useState
}, [user?.id])

具有空依赖项 useEffect 的 [] 只会运行一次，因此 componentDidMount。当 useEffect 的值发生变化时，第二个 user.id 将运行。

Answer 2

来自 React 文档 - Using the Effect Hook

<块引用>

提示

如果您熟悉 React 类生命周期方法，您可以将 >useEffect Hook 视为 componentDidMount、componentDidUpdate 和 ?>componentWillUnmount 的组合。

因此，在您的情况下，您可以在 useEffect 挂钩中添加所有逻辑。

如何使用 useEffect 钩子实现 componentDidMount 和 componentDidUpdate？

2 个答案: