Javascript 嵌套循环使用通量对组件进行反应，更改父级或子级的侦听器？

我正在React/Flux中构建一个Word Dojo克隆。游戏本质上是一个令人困惑的游戏——你通过点击网格中相邻的字母来造字：

我的React组件及其来源：

所有的源代码

---

现在的工作情况如何：

有一个包含javascript对象的二维数组。对象具有“字母”字符串值和“活动”布尔值。当用户单击一个字母时，该字母将发送到GameStore，GameStore将更新该二维数组并发出更改事件

GameBoard组件侦听该更改事件，然后重新渲染10个TileColumn，然后每个TileColumn依次渲染10个Tile。GameBoard将商店的数据作为其状态的一部分，而Tile将其自己的字母/活动状态作为道具

问题是更改1个字母会导致所有100个平铺重新渲染

---

应更新组件

我尝试在互动程序上使用shouldComponentUpdate来指定它只应在其“active”值发生更改时更新，但问题是this.props.active和nextrops.active始终是相同的值：要么都是false，要么都是true

---

把责任推给孩子们

我的另一个想法是让每个互动程序负责自己的更新，直接在互动程序上注册更改侦听器。我收到了一个警告，说我的侦听器数量已经超过了，而且似乎每次更新一封信时都会触发100个更改侦听器，这样会降低效率。虽然这只是Javascript，所以我们可以避免一些DOM操作

---

性能

我启动了探查器，现在，由于家长负责所有的状态管理，在点击字母时需要40毫秒来重新渲染整个电路板。这并不坏，但当游戏变得更复杂时，我担心它会成为一个明显的延迟

---

需要帮助

具体地说，我正在寻找关于这种情况下最佳实践的建议（当您有嵌套的、迭代的组件时），如果shouldComponentUpdate是解决方案，但我只是使用了错误的方法

---

谢谢

是的，这是解释React在默认情况下不快速的经典示例。我有一个很长的例子来说明你想解决什么样的问题

基本上你有两个典型的问题：

你的方式很好，但你只是改变了对象。这使得很难知道某个对象是否已更改

默认情况下，React naively重新计算整个应用程序。如果智能地使用

shouldComponentUpdate

，则只能使用render（）防止昂贵的元素重新计算

解决方案：

使用

shouldComponentUpdate

（或者只使用

ReactComponentWithPureRenderMixin

）以防止在

平铺中浪费重新计算。当然，除非你做几件事，否则这个不会起作用

解决办法是：

您知道哪些属性是允许变异的，并根据这些属性设置
shouldComponentUpdate
是否只允许更改
互动程序。活动
？您可能只需要检查
prevProps.tile.active===this.props.tile.active
是否相等即可

创建一个新对象，以便轻松比较对象引用
您可能已经知道
var a={}；VarB=a
将使其成为
a==b
，而
VarC={}；var d={}将使其成为
c！==d
。每当进行更新时，请完全替换平铺对象，以便可以在旧平铺对象所在的位置使用新的平铺对象。这样，快速性能实际上只是
mixin:[ReactComponentWithPureRenderMixin]

这可能比你想要的要糟糕得多，但这正是我如何让任何类型的集合在React中呈现良好的方式。没有这些技术，我真的无法不停地工作

祝你好运
 您还应该在TileColumn的shouldComponentUpdate中打勾。ImmutableJS使PureRenderMixin更容易处理这一切。切换到ImmutableData，在所有组件中使用mixin，就完成了。谢谢！这非常有用。我很确定shouldComponentUpdate不起作用的原因是因为javascript变量只指向对象；使用Immutable.js应该可以解决这个问题，这是我一直想做的事情。