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

Question

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

优化结果的呈现对我来说很重要，这样 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 时做了这个，我知道人们认为在 state 中存储组件是非常糟糕的做法。

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

另一个答案说“渲染方法中的一个函数将在每次渲染时创建，这会对性能造成轻微影响。”

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

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处理程序中使用箭头函数，因此由于我们使用了引用，因此不会在每次渲染中重新创建该函数。