React替代componentDidReceiveProps

如何解决React替代componentDidReceiveProps

我正在创建一个聊天应用程序，并且有一个名为ChatBox的组件。当用户单击聊天频道时，ChatBox订阅WebSocket。现在，这是在构造函数中完成的。问题是我现在需要让用户更改频道，但是在更改道具时不调用构造函数。我可以使用componentDidUpdate，但是我必须在每个渲染器上将我的道具与旧的道具进行比较，这非常不方便。

TL； DR：，当我的道具改变时，我需要做些事情。我找到了一种名为componentDidReceiveProps的方法，该方法非常适合我的情况！但是可悲的是，React表示该方法是不好的做法，因此他们不赞成使用该方法：

我们学到的最大的经验之一是，我们的一些遗产 组件生命周期倾向于鼓励不安全的编码实践。这些生命周期方法通常 被误解并被巧妙地滥用

我的问题是：产生相同行为的正确方法是什么？

解决方法

使用componentDidUpudate。检查相关道具是否已更改，如果已更改，请更新套接字或执行其他所需的操作。

componentDidUpdate(prevProps) {
  if (this.props.channel !== prevProps.channel) {
    // do stuff
  }
}

但是我必须在每次渲染时将我的道具与旧道具进行比较，这非常不方便。

是的，您确实需要检查正确的道具是否已更改。您还必须使用componentWillReceiveProps来做到这一点。

,

可以使用useEffect钩子将其复制。如果您将依赖项数组设置为包含您要查找的道具，那么它将仅在该道具发生更改时运行。

为此，您需要将其转换为功能组件，而不是基于类的组件。

示例：

import React from 'react'

Function ComponentName(props){
  React.useEffect(() => {
    // Code inside here will run when anything in the dependency array changes
  },[prop.propName])  //<---Dependency array.  Will watch the prop named "propName" and run the code above if it changes.

  return (
    //Your JSX
  )
}