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

Adam D 发表于 Dev

亚当·D

我有一个简单的字典应用程序正在返回搜索结果。一个搜索上查询每次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时就做到了这一点，并且我了解到人们认为在状态中存储组件确实是一种不好的做法。

我想知道在性能优化方面的最佳实践是什么（以及代码清洁度）。我应该将结果数组存储为状态然后进行渲染，然后将其映射到render函数中的组件吗？这会导致性能下降吗？

另一个答案是：“每个渲染都会在render方法中创建一个函数，这对性能造成了轻微的影响。”

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

devserkan

我不太确定，但我在想与@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处理程序中使用箭头功能，因此由于我们使用了引用，因此不会在每个渲染中都重新创建此功能。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。