родительский компонент повторного рендеринга дочерние компоненты несколько раз ReactJS

Question

Я относительно новым (МОГ) Реагировать так до сих пор пытаются узнать лучшие практики и т.д ..

я в настоящее время создания приложения в стиле приборной панели, которая имеет несколько «виджетов» отображение различных данных. У меня есть родительский компонент «Dashboard», который отображает каждый из компонентов Widget (которые являются немыми компонентами), и данные передаются через реквизиты.

Теперь проблема у меня в том, что в моем компоненте «Dashboard» Я делаю один АЯКС вызов, чтобы получить данные для каждого виджета, в случае успеха каждого АЯКС вызова я звоню SetState() и толкающее данные.

Это выглядит правильно с точки зрения дизайна, но, очевидно, вызов setState приведет к каскадному повторному рендерингу, поэтому каждый виджет будет повторно отображаться в моем случае 10 раз (так как у меня есть 10 виджетов).

Что я здесь делаю неправильно? Является ли мое приложение теперь кандидатом на архитектуру типа Flux или Redux?

Edit: Код ниже

Родитель компонент

/** 
* 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.

Answer 1

Как вы упомянули, вы храните информацию обо всех виджетах в родительском виджетах, поэтому, когда e изменения состояния, он запускает обновление для детей, что ожидается поведение. Поскольку нет никакого кода, то трудно определить ваш случай, но есть некоторые для вас:

1. shouldComponentUpdate Реализовать метод, поэтому виджет будет обновляться только тогда, когда он получает измененный реквизит.

2. Сделайте 1 вызов ajax, чтобы получить информацию обо всех виджетах, поэтому у вас будет только 1 вызов и 1 обновление.

3. Вы можете использовать redux или mobx и подключить виджеты к состоянию, после чего оно будет повторно отображаться только в том случае, если реквизиты, переданные виджету, были изменены.

Было бы проще помочь, если вы напишете больше кода.