React：更新数组元素而不重新渲染其他数组元素

Question

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

示例：有一个包含 500 个<Card>组件的数组并编辑<Card>编号为 27（更新myArray道具），我只想重新渲染 <Card>编号为 27。

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

就我而言，<Card>组件有点重，如果它们没有单独更改，我希望避免重新渲染它们，但是一旦myArrayprop 更改并触发render()方法，每个组件都会<Card>被重新渲染，从而导致每次<Card>更改时出现一些性能问题。

Answer 1

shouldComponentUpdate()最后，我按照 Gabriele 的建议，通过使用组件中的方法解决了这个问题Card，即使Card组件是更新数组的一部分，如果shouldComponentUpdate()returns ，它将保留之前的渲染状态false。