React 替代 componentDidReceiveProps

Question

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

TL; DR: 当我的道具被改变时，我需要做点什么。我找到了一个名为 componentDidReceiveProps 的方法，它非常适合我的情况！但遗憾的是 React 说这个方法是不好的做法，他们弃用了它：

One of the biggest lessons we’ve learned is that some of our legacy component lifecycles tend to encourage unsafe coding practices ... These lifecycle methods have often been misunderstood and subtly misused

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

Answer 1

使用componentDidUpudate。检查相关的 prop 是否改变，如果是，更新套接字或做任何其他需要的事情。

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

but I would have to compare my props against my old props on every render, which is very inconvenient.

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

Answer 2

这可以使用 useEffect 挂钩进行复制。如果您将依赖项数组设置为包含您要查找的道具，那么它只会运行仅当该道具更改时。

为此，您需要将其转换为功能组件而不是 class-based 组件。

示例：

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
  )
}

React 替代 componentDidReceiveProps

React substitute for componentDidReceiveProps

reactjs

react-lifecycle