Javascript React性能通过数百种元素获得成功

我有一个React应用程序，可以在服务器上轮询控制台条目（例如：web版本的尾部日志）。reducer以状态存储元素（使用redux），然后渲染它们

在大约300-400个条目时，整个页面开始大幅减速

我已经在使用

react list

仅当项目在屏幕上可见时才渲染它们，所以我不认为是DOM元素的数量导致了速度问题

• 为什么会发生这种情况
• 我如何着手处理速度问题
• 我如何帮助跟踪此问题

编辑#1：以下是视图的代码

import React, {Component} from 'react';
import ReactList from 'react-list';
import reactMixin from 'react-mixin';
import PureRender from 'react-addons-pure-render-mixin';
import classnames from 'classnames';
import css from './styles/feed.scss';

export class Entry extends Component {
  constructor(props) {
    super(props);
    this.getContent = this.getContent.bind(this);
  }
  shouldComponentUpdate() {
    return false;
  }
  getContent() {
    return <div className="content" dangerouslySetInnerHTML={{__html: this.props.entry.message}}></div>;
  }
  render () {
    var className = classnames("type", this.props.entry.type);
    return (
      <div className="entry">
        <div className={className}>{this.props.entry.type}</div>
        <div className="message">
          {this.getContent()}
        </div>
      </div>
    );
  }
}
Entry.propTypes = {
  entry: React.PropTypes.shape({
    type:React.PropTypes.string.isRequired,
    message:React.PropTypes.string.isRequired,
    id:React.PropTypes.id
  }).isRequired
};

export class Feed extends Component {
  constructor(props) {
    super(props);
    this.renderItem = this.renderItem.bind(this);
    this.shouldScrollBottom = true;
  }
  componentDidUpdate (prevProps) {
    if (this.shouldScrollBottom) {
      var node = ReactDOM.findDOMNode(this);
      node.scrollTop = node.scrollHeight
    }
  }
  componentWillUpdate() {
    var node = ReactDOM.findDOMNode(this);
    this.shouldScrollBottom = node.scrollTop + node.offsetHeight === node.scrollHeight;
  }
  renderItem(e, key) {
    let entry = this.props.entries[e];
    return <Entry entry={entry} key={key} visible={this.props.filter.indexOf(entry.type)!==-1 ? true : false }/>;
  }
  render () {
    return (
      <div className="console">
        <ReactList
          itemRenderer={this.renderItem}
          length={this.props.entries.length}
          type='variable'
          useTranslate3d={true}
        />
      </div>
    );
  }
}
Feed.propTypes = {
  entries: React.PropTypes.array,
  filter: React.PropTypes.array
};
Feed.defaultProps ={
  entries: [],
  filter: []
}
reactMixin(Feed.prototype, PureRender);

import React，{Component}来自'React'；
从“反应列表”导入反应列表；
从“react mixin”导入reactMixin；
从“react addons pure render mixin”导入PureRender；
从“类名称”导入类名称；
从“/styles/feed.scss”导入css；
导出类条目扩展组件{
建造师（道具）{
超级（道具）；
this.getContent=this.getContent.bind（this）；
}
shouldComponentUpdate（）{
返回false；
}
getContent（）{
返回；
}
渲染（）{
var className=classnames（“type”，this.props.entry.type）；
返回(
{this.props.entry.type}
{this.getContent（）}
);
}
}
Entry.propTypes={
条目：React.PropTypes.shape({
类型：React.PropTypes.string.isRequired，
消息：React.PropTypes.string.isRequired，
id:React.PropTypes.id
}).需要
};
导出类提要扩展组件{
建造师（道具）{
超级（道具）；
this.renderItem=this.renderItem.bind（this）；
this.shouldScrollBottom=true；
}
componentDidUpdate（prevProps）{
if（this.shouldScroll底部）{
var node=ReactDOM.findDOMNode（this）；
node.scrollTop=node.scrollHeight
}
}
componentWillUpdate（）{
var node=ReactDOM.findDOMNode（this）；
this.shouldScrollBottom=node.scrollTop+node.offsetHeight===node.scrollHeight；
}
renderItem（e，键）{
让entry=this.props.entries[e]；
返回；
}
渲染（）{
返回(
);
}
}
Feed.propTypes={
条目：React.PropTypes.array，
过滤器：React.PropTypes.array
};
Feed.defaultProps={
条目：[]，
过滤器：[]
}
reactMixin（Feed.prototype，PureRender）；

如果您向我们展示一些代码，这会有所帮助……如果您对其进行配置，您可能会发现为什么会发生这种情况（例如，使用chrome profiler：timeline&CPU配置文件通常就足够了）。PS：向来自Ivan的Andrew和Simon问好；-）由于您没有从中更改任何属性/道具，因此我会将componentWillUpdate中的代码移动到componentDidUpdate，以便您的dom在一个阶段而不是两个阶段中混乱，并且您可以缓存一些昂贵的dom值，如

node

和

scrollHeight

。您还可以使用

node.scrollTop=9e9移动滚动条“一直向下”而不是测量，这很昂贵。@dandav这就是为什么这个神奇的数字
9e9
？我用谷歌搜索了一下。它是900000000的科学符号。似乎有一些惯例，比如从x中获取32位值，但是为什么呢？？只是为了酷？很简单：9e9保证大于卷轴高度，除非，嗯，是的，它是有保证的。如果你拍摄的高度过高，它只会滚动到底部。这可能比试图从userland JS中确定高度和滚动位置要快得多。如果您向我们展示一些代码，这会有所帮助……如果您对其进行分析，您可能会发现为什么会发生这种情况（使用chrome profiler，例如：timeline&CPU profile通常就足够了）。PS：向来自Ivan的Andrew和Simon问好；-）由于您没有从中更改任何属性/道具，因此我会将componentWillUpdate中的代码移动到componentDidUpdate，以便您的dom在一个阶段而不是两个阶段中混乱，并且您可以缓存一些昂贵的dom值，如
node
和
scrollHeight
。您还可以使用
node.scrollTop=9e9移动滚动条“一直向下”而不是测量，这很昂贵。@dandav这就是为什么这个神奇的数字
9e9
？我用谷歌搜索了一下。它是900000000的科学符号。似乎有一些惯例，比如从x中获取32位值，但是为什么呢？？只是为了酷？很简单：9e9保证大于卷轴高度，除非，嗯，是的，它是有保证的。如果你拍摄的高度过高，它只会滚动到底部。这可能比从userland JS确定高度和滚动pos要快得多。