Question

我想知道当数据没有改变时是否可以避免兄弟组件重新渲染。我想这可能是因为我有它的结构方式，所以让我澄清一下今天的情况。我有一个智能组件，可以访问类似这样的状态：

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

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

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

关于哪种方法是实现这一目标的最佳途径，我有点迷失。

修改

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

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

1 个答案: