Question

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

{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来确定组件是否更新。

Answer 2

重新渲染所有行的原因是，在使用的可观察更改时，必须为每个观察者组件重新评估props.viewState.isCustomerSelected(props.customer)。

解决此问题的一种方法是使用map，以便每个条目都有一个潜在的checked字段，这样只有选定和取消选择的组件才能重新渲染。

示例（JSBin）

class AppState {
  @observable todos = [
    {
      id: '1',
      title: 'Do something'
    }, 
    {
      id: '2',
      title: 'Do something else'
    },
    {
      id: '3',
      title: 'Do a third thing'
    }
  ]

}

var appState = new AppState();

@observer
class Todos extends React.Component {
  checked = observable.map({});

  changeTodo = (todo) => {
    this.checked.clear();
    this.checked.set(todo.id, true);
  };

  render() {
    return <div>
      <ul>
        { this.props.appState.todos.map((todo) =>
          <Todo 
            todo={todo} 
            key={todo.id}
            checked={this.checked}
            onChange={() => this.changeTodo(todo)} />
        ) }
      </ul>
      <DevTools />
    </div>;
  }
}

@observer
class Todo extends React.Component {
  render() {
    const { todo, checked, onChange } = this.props;
    const isChecked = checked.get(todo.id);
    return <li>
      <input 
        type="checkbox"
        checked={isChecked} 
        onChange={onChange} />
      {todo.title}
    </li>;
  }
}

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

2 个答案: