父组件多次重新渲染子组件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...') 放在其中一个子渲染方法中，它会显示多次，具体取决于它在 ajax 调用堆栈中的位置

Answer 1

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

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

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

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

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