到目前爲止,我通過兩個正式的Flux體系結構示例(https://github.com/facebook/flux)非常全面地工作。如何處理Flux/React中的數據更改?
但是,我真的不確定您將如何完成初始數據渲染後的數據更改。
例如,假設由於服務器響應,示例中的待辦事項發生更改,如何實現相關項目正確更新而不使用項目組件中的setProps()(就我而言理解,禁止)?
這可能是更多與反應有關的誤解 - 期待您的建議!
到目前爲止,我通過兩個正式的Flux體系結構示例(https://github.com/facebook/flux)非常全面地工作。如何處理Flux/React中的數據更改?
但是,我真的不確定您將如何完成初始數據渲染後的數據更改。
例如,假設由於服務器響應,示例中的待辦事項發生更改,如何實現相關項目正確更新而不使用項目組件中的setProps()(就我而言理解,禁止)?
這可能是更多與反應有關的誤解 - 期待您的建議!
帶助推的想法在於,每當存儲發生更改時,都會將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
,並在每次更改商店時綁定回調onStoreChange
,然後將items
的當前組件狀態設置爲由store.getItems()
提供的商品數組。
因此,當組件第一次安裝時,它會從商店獲取當前商品並顯示它們,只要商店更改它將執行onStoreChange
,該商店將再次從商店獲取商品並通過this.setState()
再次設置商品。
當然,我們希望保持清潔,因此此組件在拆卸組件時也會刪除onStoreChange
綁定。
注:記住,調用this.setState()
內componentDidMount
不不事業的組成部分重新渲染:)
更多關於這個Facebook的通量文檔在這裏:http://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view
很好的解釋,但一個NIT:我相信在componentWillMount和getInitialState()中使用setState()是多餘的。 getInitialState()可以簡單地調用store.getItems()。 componentWillMount中唯一需要發生的事情就是調用addChangeListener()。 – fisherwebdev 2014-10-12 17:14:59
componentWillMount應該是componentDidMount,否則你會泄漏節點中的事件發射器。 – FakeRainBrigand 2014-10-12 19:04:21
好點,我目前還沒有在瀏覽器以外的任何地方使用過。 – 2014-10-12 19:39:22