选择更改后,所有表行都会重新呈现

Question

我有客户表和所选客户存储在ViewState.问题是当选择发生变化时,所有行都会重新渲染,这很慢.理想情况下,只有选定的行和之前选择的行会重新渲染,但我没有找到如何实现这一点.我的结构与MobX联系人列表示例中的示例相同:

{this.filteredCustomers.map(customer => {
   return (
      <CustomerRow
         key={customer.id}
         customer={customer}                    
         viewState={this.props.store.view}
      />
   )                
})}

和

const CustomerRow = observer((props: CustomerRowProps) => {
   const isSelected = props.viewState.isCustomerSelected(props.customer)
   const rowClass = isSelected ? 'active' : ''

   return (
     <tr className={rowClass}>
       <td>{props.customer.lastName}</td>
       <td>{props.customer.firstName}</td>
     </tr>
   )
})

所有行都取决于ViewState.selectedCustomer通过该isCustomerSelected方法的值.

有没有其他方法来构建这个避免重新渲染所有行？

Answer 1

您可以使用shouldComponentUpdate来决定是否更新组件。