Question

我有这样的UI：

First User: <UserSelect value={this.state.user1} />
Second User: <UserSelect value={this.state.user2} />
...
Other User: <UserSelect value={this.state.user3} />

其中UserSelect是用于选择具有自动填充功能的用户的组件。可能有很多。一种类型的组件可以在Flux中监听singleton Store。但就我而言，一个UserSelect组件中的值的变化会影响其他组件的状态。

我应该如何构建我的应用来解决这个问题？

在componentDidMount中为每个组件创建一个商店？

// not flux way
componenDidMount: function() {
  this.usersStore = UsersStore.createStore();
  this.usersStore.on('change', ...);
}

或在Store中制作类似查询选择器的内容？

// flux way, but affects all mounted components on page
componenDidMount: function() {
  UsersStore.on('change', this.update);
},

update: function() {
  this.setState({
    items: UserStore.get({ loginLike: this.state.inputValue })
  });
},

handleInputChange: function(e) {
  this.setState({ inputValue: e.target.value });
  loadUsersAction({ loginLike: e.target.value });
}

或......？

Answer 1

您可以使用第二种方法并执行类似查询选择器的操作并且可以正常使用。只是不要忘记正确的Flux流量。

如果您希望在长期运行中获得非常出色的性能和更轻松的开发，请使用不可变数据结构。然后，您不必担心影响其他组件（关于性能）。这是一篇简单的介绍文章：http://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/

Flux个人商店的组件

1 个答案: