如何避免兄弟组件重新渲染

Question

我想知道是否有可能在数据未更改时避免兄弟组件重新呈现。 我想这可能是因为我的结构方式所致，所以让我澄清一下我今天所拥有的。 我有一个智能组件，该组件可以访问类似于以下的状态：

showcaseState = {
    products: {
        1: {
            name: "Ball"
        },
        2: {
            name: "Puzzle"
        }
    },
    cart: [2]
}

并且此智能组件将呈现两个Dumb组件。 第一个（ProductsList组件）接收产品列表，第二个（Cart组件）获取一个列表，该列表仅包含与cart属性内的索引匹配的产品。 每当我在ProductsList组件内单击一个产品时，它都会触发将该产品索引添加到购物车的操作，因此Cart组件将被重新呈现。

事实是，即使数据完全没有变化，ProductsList也会重新呈现。 我的猜测是，这是因为主要组件重新发布了。 我如何避免这种情况？ 我是否应该使ProductList组件更智能，让它访问产品状态并从Main组件中删除产品？

我对于哪种是实现此目标的最佳方式有些困惑。

编辑

Smart组件的渲染是这样的

let { products, cart } = this.props.app
let cartProds = cart.map(prodId => { return products[prodId] })

<div>
    <ProductsList prods={products} />
</div>
<div>
    <Cart prods={cartProds} />
</div>

Answer 1

对于对此感兴趣的任何人，我最终使用redux来管理应用程序状态，并分离了每个组件所需的内容。