父組件重新繪製子組件多次ReactJS

我是比較新的（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調用堆棧中的位置顯示多少次

來源

2016-07-28 Zinc

你能分享你的代碼嗎？ – Mihir

如果您確實需要擊中5個API（或5次API）才能獲取每個小部件的信息，那麼請在每個小部件中執行此操作。如果你可以把它放在一起，那就在父母身上做。或者您可以使用'Promise.all（[]）'並在更新狀態之前等待所有請求返回。但是，真的，是把它放在一個redux商店。 –

@DavidGilbertson是的，我最初開始做單個組件的調用，但後來讀的地方，所有的數據更好地通過從父母道具'愚蠢的'組件，所以去這條路線 – Zinc

正如您所提到的，您將有關所有窗口小部件的信息存儲在父窗口小部件中，因此當電子狀態的變化，它觸發兒童更新，預期的行爲是什麼。由於沒有代碼，它是難以確定你的情況，但也有一些對你：

實現shouldComponentUpdate方法，所以，只有當它接收改變道具部件將被更新。
做1 ajax調用來獲取所有小部件的信息，所以你將只有1個電話和1個更新。
您可以使用redux或mobx並將您的小部件連接到某個狀態，然後僅當傳遞給小部件的道具發生更改時纔會重新渲染。

如果你編寫更多的代碼會更容易。

來源

2016-07-28 07:39:05

嗨羅斯 - 是的，我明白爲什麼它是這樣做，我現在在工作，所以會在幾分鐘內添加一些代碼。我嘗試實現了shouldComponentUpdate，但組件從未接收到初始數據（因爲我猜測setState已經在它碰到那個小部件之前已經發生了3次或4次）。不幸的是，我必須調用多個端點來獲取不同的數據。也許我可以做每個AJAX調用，然後推入一個數組，然後當所有的Ajax調用完成時，我可以設置一次狀態。似乎矯枉過正？我將發佈代碼 – Zinc

現在更新了代碼。 – Zinc

父組件重新繪製子組件多次ReactJS

回答

相關問題