Question

我正在制作一个聊天应用程序，并且希望将其各个部分分开。

例如，我有一部分代码描述了通信逻辑。因此，当有人收到消息addMessage时，可以使用该函数将其传递给组件：

import { addMessage } from './components/App.Chat.MessageField'

rtc.on('data', (data) => {
  /.../
  addMessage(message);
});

和addMessaget函数是 react 组件的绑定方法：

export var addMessage;

export default class MessageField extends Component {

  constructor() {
    /.../
    addMessage = this.addMessage.bind(this);
  }

  render() {
    /.../
  }

  addMessage(message) {
    /.../
    this.setState(/.../);
  }

}

到目前为止，一切正常。但是我怀疑这是个好解决方案。 它会引起一些问题还是有更好的方法呢？

Answer 1

这将导致错误。如果在未安装的组件上调用setState，React将抛出错误。在您的示例中，这意味着如果没有MessageField从未卸载过的情况，则addMessage有时会抛出。当然，您的应用程序不应依赖任何永不卸载的组件，因为它是React语义的核心部分。

一种更好的方法是使用redux并使用redux状态和操作来重构“添加消息”行为。您的rpc.on代码段也可以放入其自己的中间件中。

在反应组件之外使用反应组件的方法

1 个答案: