到目前为止,我已经通过两个正式的Flux架构示例(https://github.com/facebook/flux)进行了相当详尽的工作。
但是,我真的不确定在渲染初始数据后如何完成数据更改。
例如,假设由于服务器响应而导致示例中的待办事项发生更改,如何在不使用项组件中使用setProps()的情况下正确更新相应项(据我所知,这是禁止的) ?
这可能更多是与React相关的误解-期待您的建议!
最佳答案
使用flux的想法是,每次存储更改时,都将React组件的内部状态(或其一部分)设置为存储中的对象或值。
因此,例如这样的东西(不是真实的代码,而是给您一个想法):
var Component = react.createClass({
getInitialState: function() {
return {
items: Flux.getStore("ItemStore").getItems()
}
},
componentDidMount: function() {
this.store = Flux.getStore("ItemStore");
this.store.addChangeListener(this.onStoreChange)
},
componentWillUnmount: function() {
this.store.removeChangeListener(this.onStoreChange);
},
onStoreChange: function() {
this.setState({
items: this.store.getItems()
});
},
render: function() {
var items = [];
for (var i = 0; i < this.state.items; i++) {
items.push(
<li key={i}>{this.state.items[i]}</li>
);
}
return (
<ul>{items}</ul>
);
}
});
此示例组件所做的是呈现
this.state.items
列表,该列表位于ItemStore
商店中,并且可由ItemStore.getItems()
访问。因此,请看一下获取商店的componentDidMount
,每当商店发生更改时便将回调绑定(bind)到onStoreChange
,然后将items
的当前组件状态设置为store.getItems()
提供的items数组。结果,当第一次安装组件时,它会从商店中获取当前商品并显示它们,每当商店发生变化时,它将执行
onStoreChange
,它再次从商店中获取商品并通过this.setState()
再次设置它们。自然,我们希望保持干净,因此在卸载组件时,此组件也将删除
onStoreChange
绑定(bind)。注意:请记住,在
this.setState()
中调用componentDidMount
不会导致组件重新呈现:)有关更多信息,请参见facebook-flux文档:http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view