1

我有组件

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-200 毫秒来渲染，这很不寻常，因为我在另一个组件中做了类似的事情，渲染时间不到 8 毫秒。出了点问题，我无法弄清楚问题所在。

关于如何确定我的表现在哪里下降的任何想法？

谢谢！

4

1 回答 1

0

这种方式怎么样。

  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>
    );
  }
}

于 2015-11-10T16:45:34.233 回答