Question

我对React相对较新（ish）所以仍然在努力学习最佳实践等。

我目前正在创建一个仪表板样式的应用程序，它有多个显示各种数据的“小部件”。我有一个父组件'Dashboard'，这将呈现每个'Widget'组件（它们是哑组件），数据通过props传递。

现在我遇到的问题是，在我的'Dashboard'组件中，我正在进行一次ajax调用以获取每个Widget的数据，每次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

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

实施shouldComponentUpdate方法，因此只有在收到更改的道具时才会更新窗口小部件。
执行1次ajax调用以获取所有小部件的信息，因此您只能进行1次通话和1次更新。
您可以使用redux或mobx并将小部件连接到某个状态，然后只有在传递给小部件的道具发生更改时才会重新呈现。

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

父组件多次重新呈现子组件ReactJS

1 个答案: