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

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來管理應用程序狀態，並分離了每個組件所需的內容。