javascript - 在 React 应用程序中映射数组以优化性能的最佳实践

Question

我正在制作一个简单的字典应用程序，它可以返回搜索结果。使用 lokiJS 在搜索字段的每个 onChange 上查询搜索字典的内存数据库，因此结果非常很快。

优化结果的呈现对我来说很重要，这样 50 多个过滤后的搜索结果会随着用户键入和每次击键时发生查询而不断流动。

这是我到目前为止一直在做的事情:(这是可行的，但这是最好/最快的方法吗？)

数据库的每个(同步)查询都会返回一个对象数组，然后我将其映射为如下所示:

queryDB(query) {
  const results = queryLokiJsDB(query);
  const resultsMapped = results.map((mpd) =>
        <dl key={mpd["$loki"]} onClick={() => this.clickFunction(mpd.p, mpd.f)}>
          <dt>{mpd.p} - {mpd.f}</dt> <dd>{mpd.e} <em>{mpd.c}</em></dd>
        </dl>);
  this.setState({ results: ( 
    <div>
      {resultsMapped}
    </div>
  )});
} 

然后，一旦我像那样映射了结果，我就将映射的组件添加到状态，然后屏幕将使用新结果进行渲染。

render() {
  return (
    <div>
      <SearchBarStuff />
      <div className="results-container">
          {this.state.results}
      </div>
    </div>
  );
}

我在刚学习 React 时就做了这个，我知道人们认为在状态中存储组件是非常糟糕的做法。

我想知道在性能优化(和代码清洁)方面的最佳实践是什么。 我应该将结果数组存储在状态中然后渲染然后将它们映射到渲染函数中的组件中吗？这会导致性能下降吗？

Another answer说“渲染方法中的一个函数将在每次渲染时创建，这对性能有轻微影响。”

为什么在状态中存储组件如此糟糕？仅仅是为了代码清晰吗？保持国家小？感谢您的帮助和耐心。

Answer 1

我不太确定，但我在想与@larz 在评论中解释的问题相同的问题。另外，正如你提到的，状态会更清晰。如果我是你，我会怎么做。

首先，用结果设置你的状态:

queryDB(query) {
    const results = queryLokiJsDB(query);
    this.setState({ results });
}

然后，映射结果，但我不会立即创建 JSX，而是使用一个单独的组件。将 mpd(元素)和 onClick 函数及其引用传递给它。

render() {
    return (
        <div>
            <SearchBarStuff />
            <div className="results-container">
                {this.state.results.map( mpd => (
                     <Item key={mpd["$loki"]} mpd={mpd} onClick={this.clickFunction} />
                ) )}
            </div>
        </div>
    );
}

像那样使用Item:

const Item = ( props ) => {
    const { mpd, onClick } = props;
    const handleClick = () => onClick( mpd.p, mpd.f );

    return (
         <dl onClick={handleClick}>
            <dt>{mpd.p} - {mpd.f}</dt> <dd>{mpd.e} <em>{mpd.c}</em></dd>
         </dl>
    );
}

这样，您就不会在 onClick 处理程序中使用箭头函数，因此不会在每次渲染时都重新创建此函数，因为我们使用了引用。