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

【问题标题】：React: Update element of array without rerendering other array elementsReact：更新数组元素而不重新渲染其他数组元素
【发布时间】：2019-09-19 16:39:55
【问题描述】：

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

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

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

在我的情况下，<Card> 组件有点重，如果它们没有单独更改，我想避免重新渲染它们，但是一旦 myArray 属性更改并触发 render() 方法，每个 @ 987654332@ 正在重新渲染，每次<Card> 更改都会导致一些性能问题。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在您的组件中使用 memoization。如果它没有更改，则不会重新渲染相应的组件。谷歌搜索“react memoize”将为您带来很多不错的资源。我还将改进您的 Card 组件以接收 Card 对象而不是每个卡片属性。解构卡片对象会让你更难编写代码来记忆它。

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

【讨论】：