Question

我有一个React应用程序，用于轮询服务器以获取控制台条目（例如：尾部的Web版本＆n;日志）。 reducer将元素存储在state状态（使用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);

反应性能受到数百个元素的影响

0 个答案: