Question

我们遇到了一些令人沮丧的React问题。我们有一个表单，包含搜索表单和搜索结果列表。如下面的代码所示。 filter和content。

每当用户在搜索字段中输入内容时，就会出现去抖动和对休息服务的调用。

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

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

我们可以看到每次击键时ContactSearchResultLayout被渲染3次，而实际上它应该关注其余调用的结果。

我们最好的赌注是什么？对于我们的用例来说，容器组件类型的模式是错误的，是否意味着如果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＆＃34; shouldComponentUpdate＆＃34; 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
}

极慢的React列表渲染

1 个答案: