Reactjs 非常慢的反应列表渲染

我们在React方面遇到了一些令人沮丧的问题。 我们有一个表单，由搜索表单和搜索结果列表组成。 如下面代码中所示<代码>过滤器和

内容

每当用户在搜索字段中键入内容时，就会出现一个解盎司和对rest服务的调用

然后，结果填充搜索结果（内容）

即使列表中只有15项，速度也慢得离谱。 每次更新大约需要300毫秒。 在生产模式下，没有问题。仅在开发模式下。 此外，删除propTypes会使其速度更快，但仍然很慢

我们可以看到，

ContactSearchResultLayout

在每次击键时被渲染3次，而它实际上应该只关心rest调用的结果

我们最好的赌注是什么？ 对于我们的用例来说，容器组件类型的模式是否错误，这是否意味着如果SearchPageLayout道具中的某些内容发生更改，整个列表也将重新呈现

我们有一个版本，它几乎可以绕过React，只需在从服务调用传入时逐项呈现。 这是超快速的，但另一方面，更不易维护

有没有一些惯用的方法让React起作用

<SearchPageLayout
  filter={
    <ContactSearchForm
      allTeams={allTeams}
      allAreasOfExp={allAreasOfExp}
      allResponsiblePeople={allResponsiblePeople}
      allTags={allTags}
      detailed={props.searchFormExpanded}
      onSearchFieldBlur={() => props.setSearchFormExpanded(false)}
      onSearchFieldFocus={() => props.setSearchFormExpanded(true)}
    />
  }
  content={
    <ContactSearchResultLayout       //<-- this rerenders too often
      items={items.map(item => (
        <ContactCard
          key={item.PersonId}
          areasOfExpertise={item.AreasOfExperise}
          cellPhone={item.CellPhone}
          city={item.City}

props.setSearchFormExpanded（true）}
/>
}
内容={
每次都将呈现匿名函数

我将创建另一个用于创建项目的方法：

getItems() {
    return (
       items.map(item => (
        <ContactCard
          key={item.PersonId}
          areasOfExpertise={item.AreasOfExperise}
          cellPhone={item.CellPhone}
          city={item.City}
          />
       )
    )
 }

<ContactSearchResultLayout       
  items={this.getItems()} 
   />

谢谢！有没有办法知道为什么道具会改变？或者至少比较一下它们是如何改变的？@RogerJohansson只需将nextProps与此进行比较。组件内的道具将更新
componentWillUpdate(nextProps, nextState) {
    //here you can compare your current state and props
    // with the next state and props
    // be sure to return boolean to decide to render or not
}