父组件重新绘制子组件多次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

回答

相关问题