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

Question

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

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

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

问题是，ProductsList 也在重新渲染，尽管它的数据根本没有改变。我的猜测是它的发生是因为主组件重新渲染。我该如何避免这种情况？我应该让 ProductList 组件智能，让它访问产品状态并从主组件中删除产品吗？

对于实现这一目标的最佳方法，我有点迷茫。

编辑

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 来管理应用程序状态，并分离每个组件所需的东西。