Javascript 什么'；在render（）中定义新对象是避免浪费渲染的惯用方法？

我有一个带有以下渲染方法的

PureComponent

：

  render() {
    return <div>
      <List items={_.map(this.state.filteredItemIds, id => this.state.items[id])} />
      <SearchBox value={this.state.searchValue} onChange={this.handleSearchChange} />
    </div>;
  }

当我渲染

时，我希望传递

项

，使其仅为

filteredItemIds

选择的项。如何在每次不在

render（）中创建新的数组实例的情况下执行此操作？解决这个问题的惯用方法是什么

或者我应该创建一个新的数组实例，但重写
shouldComponentUpdate（）
以对
filteredItemIds
执行深度相等性检查
 每次更改搜索词时，组件都会重新呈现，因为您可能正在设置onChange处理程序的状态，而不是因为映射，映射将影响列表组件的重新呈现。这就是您要防止重新渲染的对象吗？如果是这种情况，我想你可以在列表中设置shouldComponentUpdate，或者如果列表相同，你不能在你的状态中设置
filteredItemIds
。对不起，上面没有完全清楚-
state
是针对
list
的父级，而不是
list
本身。我要传递给
列表的唯一内容是
项目
，我想知道，当两个版本的
项
不完全相同时，如何避免重新渲染。我相信我会在这里回答
，或者如果列表相同，您无法在您的状态中设置FilteredItems
您正在设置状态，当搜索条件更改时，您可以计算
下一个列表
，并且将其与当前组件进行比较，如果它们相同，则不要设置状态，这将阻止组件重新渲染。至于，如何确定列表是否相等或相似，将完全取决于您的数据结构，在这种情况下，由于您是ID，您可以使用u.difference来检查相等性。
this.state = this.updateFilteredItemIds({
  items: [
    {id: 0, name: 'Apple'},
    {id: 1, name: 'Orange'},
    {id: 2, name: 'Horse'},
  ],
  filteredItemIds: null,
  searchValue: ''
});