使用相同道具重新渲染的元素

Question

我有一个表，其中的表行为500。每行是一个单独的组件。

表的源数据是对象的简单数组。需要拖动行，并且每次我拖动另一行时，我都会更改源数据，从而在数组内移动项目。

数据是不可变的，因此每次我处理新数组时。

问题是：每次更改数据时，都会重新渲染整个500个元素。这有点意外的行为，因为大多数元素的键保持不变，而React应该优化更新。

shouldComponentUpdate解决了问题，但是我使用的是mobx，它创建了自己的sCU实现，因此我无法实现自己的sCU，因为它破坏了mobx流程。

我有一种感觉，即使没有sCU，它也应该可以正常工作。

<Table>
    {data.map(item => {
      <TableRow key={item[keyField]} item={item} {...props}/>
    })}
</Table>

对这个人有什么想法吗？

-更新---

两个组件都是观察者。我这样更改了结构：

// Table component @observer 

@observable 
data = [] 

componentWillReceiveProps(nextProps) { 
    this.data = [...nextProps.data] 
} 

@action.bound 
onDrag() { 
    // drag handler here which mutates this.data 
    this.data.splice(...) 
} 

render() { 
    return this.data.map(item => (
        <TableRow key={item[keyField]} item={item} {...props} onDrag={this.onDrag}/>
    ))
} 

但是它给出了完全相同的结果，拖动时可以渲染500个渲染

Answer 1

数据是不可变的，因此每次我处理新数组时。

这是答案。如果它是一个新数组，则整个TableContainer组件（或您所说的任何一个，都引用data数组）将对其做出反应并重新呈现。

因为大多数元素的键保持不变，并且React应该优化更新。

如果键和组件的类型没有改变，那么React将不会重新安装它们，但是无论如何它们都会重新呈现。