Arrays React：更新数组元素，而不重新命名其他数组元素

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

示例：拥有500个

组件的数组，并编辑

第27个组件（更新

myArray

道具），我只想重新播放第27个组件

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

render=（）=>{
this.props.myArray.map（卡片=>{
返回
})
}

---

在我的例子中，

组件有点重，如果它们没有单独更改，我希望避免重新提交它们，但只要

myArray

道具更改并触发

render（）

方法，就会重新提交每一个

，每次

更改都会导致一些性能问题。

在组件中使用备忘录。如果没有更改，则不会重新提交相应的组件。谷歌搜索“react memoize”会给你带来很多不错的资源。 我还将改进您的卡组件，以接收卡对象，而不是每个卡属性。解构卡片对象会让你的生活变得更加艰难——写代码来记忆它

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

render=（）=>{
this.props.myArray.map（卡片=>{
返回
})
}

最后，我在

Card

组件中使用

shouldComponentUpdate（）

方法解决了这个问题，正如Gabriele所建议的，即使

Card

组件是更新数组的一部分，如果

shouldComponentUpdate（），它也会保持以前的呈现状态

返回

false

詹姆斯的回答对我很有用。 如果使用React钩子，请使用

React.memo

和

prevProps

以及

nextrops

来实现

shouldComponentUpdate（）

---

（仅供参考：）

制作

卡片或在其中使用的可能重复。“在组件中使用备忘录。”通过解释或展示这意味着什么，可以改进此答案！