反应:更新数组元素而不重新渲染其他数组元素 [英] React: Update element of array without rerendering other array elements

问题描述

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

示例:拥有500个<Card>组件的数组并编辑<Card>数字27(将更新myArray道具)，我想仅渲染 <Card>数字27.

Example: Having an array of 500 <Card> components and editing <Card> number 27 (which updates myArray props), I would like to rerender only <Card> number 27.

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

就我而言，<Card>组件有点沉重，如果它们没有单独更改，我想避免重新呈现它们，但是一旦myArray prop更改并触发render()方法，则每个<Card>正在重新呈现，因此每次<Card>更改都会引起一些性能问题.

In my case, <Card> components are a bit heavy and I would like to avoid rerendering them if they didn't individually change, but as soon as myArray prop changes and fires render() method, every single <Card> is being rerendered, causing some performance issues on every <Card> change.

推荐答案

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

Finally I've solved the issue by using shouldComponentUpdate() method in Card component as Gabriele suggested, even if Card component is part of the updated array, it will keep the previous rendered state if shouldComponentUpdate() returns false.

这篇关于反应:更新数组元素而不重新渲染其他数组元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！