在 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 的时候做了这个，我知道人们认为将组件存储在状态中是 非常糟糕的做法。

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

Another answer 表示“每次渲染都会创建一个 render 方法中的函数，这对性能有轻微影响。”

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

Answer 1

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

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

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