嵌套循环React组件与Flux,父级或子级的更改侦听器？
Jos*_*eau 8 javascript performance reactjs reactjs-flux
我正在React/Flux中构建一个Word Dojo克隆.游戏本质上是Boggle - 您通过单击网格中的相邻字母来创建单词:
我的React组件及其来源:
所有源代码都可以在这里查看.
它现在如何工作:
有一个GameStore,它包含一个二维javascript对象数组.对象具有'letter'字符串值和'active'布尔值.当用户单击一个字母时,会调度到GameStore,后者会更新该二维数组并发出Change事件.
GameBoard组件侦听该更改事件,然后重新渲染10个TileColumns,每个TileColumns渲染10个Tiles.GameBoard将商店的数据作为其状态的一部分,并且tile具有自己的字母/活动状态作为道具.
问题是更改1个字母会导致重新渲染所有100个图块.
shouldComponentUpdate
我尝试在Tile上使用shouldComponentUpdate来指定它只应在其"活动"值发生变化时才更新,但问题是this.props.active和nextProps.active都是相同的值:要么它们都是假的,或两者都是真的.
推迟对孩子们的责任
我的另一个想法是让每个Tile负责自己的更新,直接在tile上注册更改侦听器.我收到一个警告,我超过了监听器的数量,看起来好像100个更改监听器,所有触发每个字母更新的效率都会降低.虽然这只是Javascript,所以我们要避免一些DOM操作......
性能
我启动了Profiler,现在,在父母完成所有状态管理的情况下,它需要40ms才能在信件点击时重新渲染整个电路板.这还不错,但是当游戏变得更复杂时,我担心它会变得明显延迟.
需要帮助
具体来说,我正在寻找有关这种情况下最佳实践的建议(当你有嵌套的,迭代的组件时),如果shouldComponentUpdate 是解决方案,但我只是错误地使用它.
谢谢!
kak*_*ori 12
是的,这是默认情况下React不快的原因的典型例子.我在这里有一个很长的例子,确切地说你要解决什么样的问题.
基本上你有两个典型的问题:
默认情况下,React天真地重新计算整个应用程序.如果您
shouldComponentUpdate智能地使用,则只能使用render()来防止对元素进行昂贵的重新计算.
解:
使用shouldComponentUpdate(或仅使用ReactComponentWithPureRenderMixin)以防止浪费的重新计算Tile.当然,除非你做了几件事,否则这不会奏效.
解决方案是:
- 您知道哪些属性可以根据这些属性进行变异和设置
shouldComponentUpdate.
只tile.active允许改变？您可以只定义回调,以便只检查相等性prevProps.tile.active === this.props.tile.active.
- 创建一个新对象,以便轻松比较对象引用.
你可能已经知道,var a = {}; var b = a将让这个a === b,这var c = {}; var d = {};将让这个c !== d.每当您进行更新时都完全替换tile对象,以便您可以使用旧tile对象.这样,快速的性能实际上只是mixins: [ReactComponentWithPureRenderMixin]远离.
这可能比你想要的更多垃圾,但它几乎是我如何让任何类型的集合在React中很好地呈现.如果没有这些技术,我实际上无法让我糟糕的蚀刻草图组件在不停止磨削的情况下工作.
祝好运!