在 reactjs 组件中监听模型答案

【问题标题】：Listening for models inside reactjs components在 reactjs 组件中监听模型
【发布时间】：2014-05-14 23:29:23
【问题描述】：

我目前正在试用 reactjs，试图用它制作一个基于 MVC 的纸牌游戏。我发现 ReactJS 是一个功能强大且性能良好的视图库，但我在将其映射到更传统的 MVC 模式（其中视图侦听模型）时遇到了一些麻烦。

在纸牌游戏中，我桌上有 2 排纸牌，一张是当前玩家，一张是对手玩家。当前玩家的牌在底行，可以选择。在我的 GameView 中，我渲染了 2 个子视图，如下所示：

<SlotView key="slotview1" slot={this.state.otherPlayer.slot} selectable={false} /> <SlotView key="slotview2" slot={this.state.currentPlayer.slot} selectable={this.state.playing_cards} on_select={this.handlePlayCard}>

当回合结束时，我交换当前玩家和其他玩家（在游戏模型中）并通过事件通知游戏视图。游戏视图的状态被更新，然后它从其他玩家的角度重新呈现自己。

这很好用，其他玩家的牌显示在底行。但是，我遇到的问题是 SlotView （游戏视图的子视图）也监听它的模型（它在玩牌时自我更新）。

我在 SlotView#ComponentDidMount 中绑定监听器并在 SlotView#ComponentDidUnmount 中取消绑定它们。但是，该组件仅在第一次渲染期间安装，并且永远不会卸载并再次安装。它的属性（插槽）正在更新到另一个玩家，但它仍然监听来自第一个玩家的事件。有没有办法可以监听绑定/取消绑定事件处理程序的属性更改？或者我应该根本不听子组件中的模型，而是用更面向推送的模型替换 MVC 模型（但这似乎会产生很多带有嵌套视图的样板代码）？我应该在渲染方法本身中取消绑定/重新绑定吗（但这似乎也有问题）？

很想知道其他人是如何做到这一点的......

【问题讨论】：

标签： reactjs

【解决方案1】：

我忽略了一个 API 调用 (componentWillReceiveProps)。因此，在我的 SlotView 中，我使用以下逻辑来监听/停止监听插槽模型。仍然很想知道是否有更好的模式。

componentWillReceiveProps: function(nextProps) {
  if (nextProps.slot && nextProps.slot != this.props.slot) {
    this.props.slot.removeListener('change', this.slotListener);
    nextProps.slot.on("change",this.slotListener);
  }
},


slotListener : function (data) {
  this.setState({ selectedIndex: -1 })
},


componentDidMount: function () {
  var self = this;
  this.props.slot.on("change",this.slotListener)

},

componentWillUnmount: function () {
  this.props.slot.removeListener('change', this.slotListener);
},

【讨论】：

这可能是我解决这个特定问题的方式；你可以通过使用 mixin 让它变得更好一些；这是一个初始（未经测试）的破解：gist.github.com/BinaryMuse/e615814ae70f0b6f5460
是的，这似乎是个好主意。我会调查的。我不知道您是否可以将它混合在一起并且仍然可以使用原始的 (componentDidMount/componentWillUnmount) 方法，但是如果我可以让它工作，那么我会朝那个方向前进。
是的，它们会自动为您“合并”。
生命周期方法并不完全“合并”。组件及其使用的任何 mixin 定义的所有生命周期方法都保证被调用，尽管顺序未定义：facebook.github.io/react/docs/reusable-components.html#mixins
也许从那时起文档已更改，但他们现在声明方法将按照 mixin 列出的顺序被调用，然后是组件上的方法调用。