听商店vs forceUpdate()

时间:2016-07-29 21:38:10

标签: reactjs flux

如果我在一个页面上有五个组件,可以从商店获得一些东西。他们都在听一家商店。对于所有组件,我在商店中创建了侦听器。

我的问题是 - 我可以使用forceUpdate()代替听众吗?在商店发送内容并等待更新:

getInitialState: function() {
   return {val: Store.getFoo};
},
click: function(info) {
  Store.updateInfo(info, function() {
   this.forceUpdate();
  })
}

在店内:

updateInfo: function(info, callback) {
   foo = info + someValue;
   callback()
}

但是在文档中:

  

通常你应该尽量避免使用forceUpdate(),只能在render()中读取this.props和this.state。这使您的应用程序更简单,更高效

谢谢。

1 个答案:

答案 0 :(得分:1)

可以使用forceUpdate,但你不应该

您当前的方法是正确的(不使用forceUpdate)。

如果你有这5个共同的父级监听更改并将数据传递给子级,则父代码将变得臃肿,并且当商店更改时,您将有6个组件(父级,5个子级)呈现。拥有更多侦听商店的“容器”组件会在组件之间创建更多隔离(“独立子级”),并且性能更高,因为当商店更新时,更少的组件会重新呈现。确保你也使用了shouldComponentUpdate。

如果您想了解更多关于“独立儿童”和更高绩效的反应,请观看:https://www.youtube.com/watch?v=KYzlpRvWZ6c