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

Question

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

示例： 有一个包含 500 个 <Card> 组件的数组并编辑 <Card> 数字 27（更新 myArray 道具），我会喜欢 仅重新渲染 <Card> 数字 27。

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

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

Answer 1

在您的 component.If 中使用 memoization 它不会改变，相应的组件不会重新呈现。谷歌搜索 "react memoize" 将为您带来很多不错的资源。我还会改进您的 Card 组件以接收 Card 对象而不是每个卡片属性。解构卡片对象会使您编写代码来记忆它变得更加困难。

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

Answer 2

最后我按照 Gabriele 的建议在 Card 组件中使用 shouldComponentUpdate() 方法解决了这个问题，即使 Card 组件是更新数组的一部分，它也会保留先前的渲染状态 if shouldComponentUpdate() returns false.

Answer 3

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

React: Update element of array without rerendering other array elements