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

Parent component re-rendering child components multiple times ReactJS

本文关键字：组件 ReactJS 新渲染      更新时间：2023-09-26

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

我目前正在创建一个仪表板风格的应用程序，它有多个显示各种数据的"小部件"。我有一个父组件"Dashboard"，它呈现每个"Widget"组件（它们是哑组件），数据通过道具传递。

现在我遇到的问题是，在我的"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调用堆栈中的位置

正如您所提到的，您将所有窗口小部件的信息存储在父窗口小部件中，因此当状态发生变化时，它会触发子窗口小部件更新，即预期的行为。由于没有代码，很难识别您的案例，但有一些适合您：

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

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

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

如果你写更多的代码，会更容易提供帮助。

相关文章：