Question

我有组件

import React from 'react';
import {NavLink} from 'fluxible-router';
import SurahsStore from 'stores/SurahsStore';
import connectToStores from 'fluxible-addons-react/connectToStores';
import debug from 'utils/Debug';
import classNames from 'classnames';

class SurahsNav extends React.Component{
  constructor(props, context) {
    super(props, context);
  }

  list() {
    return this.props.surahs.map((surah, index) => {
      return (
        <li key={`surah-${index}`}>
          <NavLink routeName="surah" navParams={{surahId: surah.id}}>
            <div className="row">
              <div className="col-md-2 col-xs-2">
                <span className="surah-num">
                  {surah.id}
                </span>
              </div>
              <div className="col-md-7 col-xs-7">
                <span className="suran-name">{surah.name.simple}</span>
                <br />
                <span className="surah-meaning">{surah.name.english}</span>
              </div>
              <div className="col-md-3 col-xs-3 text-right">
                {surah.name.arabic}
              </div>
            </div>
          </NavLink>
        </li>
      );
    });
  }

  shouldComponentUpdate(nextState, nextProps) {
    return false;
  }

  render() {
    debug('component:SurahsNav', 'Render');

    let classes = classNames({
      'surahs-nav col-md-12 col-xs-12': true,
      [this.props.className]: true
    });

    return (
      <div className={classes}>
        <ul>
          {this.list()}
        </ul>
      </div>
    );
  }
}

SurahsNav.contextTypes = {
  getStore: React.PropTypes.func.isRequired,
};

SurahsNav = connectToStores(SurahsNav, [SurahsStore], (context, props) => {
  const surahsStore = context.getStore(SurahsStore);

  return {
    surahs: surahsStore.getSurahs()
  };
});

export default SurahsNav;

我已经通过消除周围的一切过程进行测试，这个过程涉及到这个组件，从它的兄弟姐妹到通过硬编码道具，一切都与商店的连接。该列表只是114个小对象，我甚至在其他地方做了类似的事情，但不是这个组件。

这个组件平均需要大约150-200ms渲染，这是不寻常的，因为我在另一个组件中执行类似的操作，并且渲染时间不到8毫秒。出了点问题，我无法弄清问题是什么。

有关如何确定我的表现下降的任何想法？

谢谢！

Answer 1

这样怎么样。

  shouldComponentUpdate(nextState, nextProps) {
    return false;
  }

  render() {
   var list = this.props.surahs.map((surah, index) => {
      return (
        <li key={index}>
          <NavLink routeName="surah" navParams={{surahId: surah.id}}>
            <div className="row">
              <div className="col-md-2 col-xs-2">
                <span className="surah-num">
                  {surah.id}
                </span>
              </div>
              <div className="col-md-7 col-xs-7">
                <span className="surah-name">{surah.name.simple}</span>
                <br />
                <span className="surah-meaning">{surah.name.english}</span>
              </div>
              <div className="col-md-3 col-xs-3 text-right">
                {surah.name.arabic}
              </div>
            </div>
          </NavLink>
        </li>
      );
    });
   }
    debug('component:SurahsNav', 'Render');

    let classes = classNames({
      'surahs-nav col-md-12 col-xs-12': true,
      [this.props.className]: true
    });

    return (
      <div className={classes}>
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

reactjs组件渲染对列表来说确实很慢

1 个答案: