2016-07-14 34 views
2

我试图用Redux管理我的Riot应用程序状态,但是我注意到当我的模型(项目的简单数组)中发生了某些变化时,即使修改涉及一个项目。Riot.JS:不可变的数据结构导致不需要的渲染

I reproduced the issue here

随着一个可变减速器是没有问题的,在这两种情况下,我观​​看在商店的变化来触发(不必要与可变数据)视图更新。

this.on('mount',() => { 
    opts.store.subscribe(() => { 
    this.update({ 
     items: opts.store.getState() 
    }) 
    }) 
}) 

gif demonstrating that DOM of my list is completely re-rendered

我认为暴乱的虚拟DOM检查只会重新呈现DOM的改变部分...

难道我做错了什么?

回答

1

添加​​循环:

<li no-reorder each={ items } onclick={ toggle }> 
    <span>{x}</span> 
</li> 
+0

似乎完美地工作,有没有这样做,任何限制? – Freez

+0

@Freez不幸的是,我不知道。 – pongo

+0

“在v3.3版本中,为了使循环渲染更加可靠,DOM节点将被移动,插入和移除,始终与您的数据集合同步:与以前的2.2版本相比,此策略将使渲染速度更慢。渲染算法,你可以添加属性no-reorder到循环节点。“来自http://riotjs.com/guide/ –