父组件多次重新渲染子组件ReactJS

Question

我对React还是比较陌生，所以仍在尝试学习最佳实践等。

我当前正在创建一个仪表板样式的应用程序，该应用程序具有多个显示各种数据的“小部件”。 我有一个父组件“仪表板”，它呈现了每个“小部件”组件（是愚蠢的组件），并且数据通过道具传递。

现在我遇到的问题是，在“仪表板”组件中，我正在执行一个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（'rendering ...'）放在子级的render方法之一中，它将显示多次，具体取决于它在ajax调用堆栈中的位置

Answer 1

如前所述，您将有关所有小部件的信息存储在父小部件中，因此，当状态更改时，它将触发子级更新，这是预期的行为。 由于没有代码，因此很难识别您的情况，但是有一些适合您的情况：

1. 实现shouldComponentUpdate方法，因此小部件只有在收到更改的道具后才会被更新。

2. 进行1个ajax调用以获取所有小部件的信息，因此您只有1个调用和1个更新。

3. 您可以使用redux或mobx并将小部件连接到一个状态，然后仅当传递给小部件的道具发生更改时，它才会重新渲染。

如果您编写更多代码，将更容易提供帮助。