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

Question

是否可以重新渲染数组中的一个元素，同时避免其他元素被重新渲染？

示例：如果有一个包含500个<Card>组件的数组，并编辑第27个<Card>（这会更新myArray属性），我想仅重新渲染第27个<Card>。

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

在我的情况下，<Card> 组件有点重，我想避免在它们没有单独改变的情况下重新渲染它们，但是一旦 myArray 属性发生变化并触发 render() 方法，每个单独的 <Card> 都将被重新渲染，这会导致每个 <Card> 改变都可能存在性能问题。

- james

---

可能是ReactJS更新状态数组中的单个对象的重复问题。 - David Zemens

尝试将 Card 改为 PureComponent，或者在其中使用 shouldComponentUpdate。 - Gabriele Petrioli

Answer 1

最终，我通过使用Gabriele建议的shouldComponentUpdate()方法在Card组件中解决了问题，即使Card组件是更新后数组的一部分，如果shouldComponentUpdate()返回false，它也会保留先前呈现的状态。

- james

Answer 2

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

（FYI: https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate）

- bychung

Answer 3

使用 memoization 在你的组件中。如果它没有改变，相应的组件就不会重新渲染。搜索“react memoize”会为您带来许多好资源。 我还会改进您的卡片组件，以接收卡片对象而不是每个卡片属性。解构卡片对象可能会使您在编写代码来记忆它时更加困难。

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

- Jodevan

---

在您的组件中使用记忆化。这个答案可以通过解释或演示其含义来改进！ - Jake Worth