Question

是否可以呈现数组的元素，防止其他元素重新呈现？

示例：我拥有500个<Card>组成的数组并编辑了<Card>数字27（它更新了myArray个道具），我想仅重新提交 <Card>第27号。

render = () => {
    this.props.myArray.map(card => {
        return <Cards key={card.id} ...card />
    })
}

就我而言，<Card>个组件有点沉重，如果它们没有单独更改，我希望避免重新呈现它们，但是一旦myArray道具更改并触发{{1} }方法中，每个render()都将被重新呈现，因此每次<Card>的更改都会导致性能问题。

Answer 1

最后，我按照Gabriele的建议通过在shouldComponentUpdate()组件中使用Card方法解决了该问题，即使Card组件是更新数组的一部分，它也将保留以前的渲染声明shouldComponentUpdate()是否返回false。

Answer 2

在组件中使用备注。如果它不变，则不会重新渲染相应的组件。谷歌搜索“反应备忘录”将为您带来很多不错的资源。我还将改进您的Card组件以接收Card对象，而不是每个Card属性。分解卡对象可以使编写代码来记住它的工作变得更加艰辛。

render = () => {
    this.props.myArray.map(card => {
        return <Cards key={card.id} card={card} />
    })
}

Answer 3

James 的回答对我很有用。如果您使用 React Hook，请使用 React.memo 和 prevProps 和 nextProps 来实现 shouldComponentUpdate()。