我是比較新的(ISH)反應所以還是努力學習最佳實踐等。父組件重新繪製子組件多次ReactJS
我目前正在創建具有多個「小部件」儀表盤風格的應用程序顯示各種數據。我有一個父組件'儀表板',這呈現每個'Widget'組件(這是愚蠢的組件)和數據通過道具傳遞。
現在我的問題是,在我的「儀表盤」組件我做一個Ajax調用以獲取每個插件的數據,每個ajax調用我打電話的setState(),推動數據的成功。
從設計模式的角度來看,這似乎是正確的,但顯然調用setState會導致級聯重新呈現,因此每個小部件都會在我的情況下重新呈現10次(因爲我有10個小部件)。
我在這做錯了什麼?我的應用程序現在是Flux還是Redux類型體系結構的候選人?
編輯:代碼如下
父組件
/**
* Ajax calls (10 different calls, wont list them, all very similar)
*/
getRecent: function (url, limit) {
$.get(url, function (res) {
var data = res.response;
var products = [];
if (data.itemListInfo.numberOfItems > 0) {
for (var i = 0, j = limit; i < j; i++) {
products.push({
name: data.userItems[i].product.name,
itemCode: data.userItems[i].product.itemCode,
img: data.userItems[i].product.thumbnailImage,
});
}
}
// Obviously this is causing render() to fire
this.setState({
recent: {
numberOfItems: data.itemListInfo.numberOfItems,
products: products
}
});
setTimeout(function() {
$('#account-recent .loading').fadeOut();
}, 500);
}.bind(this));
},
componentDidMount: function() {
this.getReviews(this.config.reviews.url); // causes a render()
this.getRecent('/api/user/purchases/list', 3); // causes a render()
this.getRecommended('/api/user/recommendations/list', 3); // causes render()
this.getPreferences('/api/user/preferences/list'); //causes render()
// More ajax calls here....
},
render: function() {
return (
<Reviews data={this.state.reviews}/>
<Recommended data={this.state.recommended}/>
<RecentlyPurchased data={this.state.recent}/>
<Preferences data={this.state.preferences}/>
)
}
如果我把一個的console.log( '渲染......')在兒童中的一個渲染方法,它將根據它在ajax調用堆棧中的位置顯示多少次
你能分享你的代碼嗎? – Mihir
如果您確實需要擊中5個API(或5次API)才能獲取每個小部件的信息,那麼請在每個小部件中執行此操作。如果你可以把它放在一起,那就在父母身上做。或者您可以使用'Promise.all([])'並在更新狀態之前等待所有請求返回。但是,真的,是把它放在一個redux商店。 –
@DavidGilbertson是的,我最初開始做單個組件的調用,但後來讀的地方,所有的數據更好地通過從父母道具'愚蠢的'組件,所以去這條路線 – Zinc