极慢的反应列表渲染

Question

我们正在经历一些令人沮丧的React问题。我们有一个表单，由一个搜索表单和一个搜索结果列表组成。如下面的代码所示。filter和content。

每当用户在搜索字段中键入内容时，就会出现去反跳和对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}

在我看来，其中一个原因是items是map操作的结果，因此会生成一个新的组件数组。但是我们如何绕过这一点呢？

有什么想法？

Answer 1

匿名函数每次都会被渲染。

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

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

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

如何检查属性是否更改，以及是否应该重新呈现代码：

您可以使用react "shouldComponentUpdate“https://reactjs.org/docs/react-component.html#shouldcomponentupdate

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
}