对于列表，reactjs组件呈现速度非常慢

我有一个组件

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;

从“React”导入React；
从“fluxible路由器”导入{NavLink}；
从“存储/存储”导入存储；
从“fluxible addons react/connectToStores”导入connectToStores；
从“utils/debug”导入调试；
从“类名称”导入类名称；
类SurahsNav扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
}
列表（）{
返回这个.props.surahs.map（（surah，index）=>{
返回(

{surah.id}
{surah.name.simple}


{surah.name.english}
{surah.name.阿拉伯语}

);
});
}
应更新组件（下一个状态，下一个操作）{
返回false；
}
render（）{
调试（'component:SurahsNav'，'Render'）；
让类=类名({
“苏拉赫导航col-md-12 col-xs-12”：正确，
[this.props.className]：正确
});
返回(

{this.list（）}

);
}
}
SurahsNav.contextTypes={
getStore:React.PropTypes.func.isRequired，
};
SurahsNav=connectToStores（SurahsNav，[SurahssStore]，（上下文，道具）=>{
const surahsStore=context.getStore（surahsStore）；
返回{
surahs:surahsStore.getSurahs（）
};
});
导出默认SurahsNav；

我已经通过消除过程测试了所有与此组件相关的东西，从它的兄弟姐妹到通过硬编码道具与商店的连接，所有东西。这个列表只是114个小对象，我甚至在其他地方做了类似的事情，但不是这个组件

这个组件平均需要约150-200毫秒来渲染，这是不寻常的，因为我在另一个组件中做了类似的事情，渲染时间不到8毫秒。出了点问题，我想不出是什么问题

对于如何确定我的表现下降到哪里，有什么想法吗

谢谢

这样怎么样

shouldComponentUpdate（下一个状态，下一个操作）{
返回false；
}
render（）{
var list=this.props.surahs.map（（surah，index）=>{
返回(

{surah.id}
{surah.name.simple}


{surah.name.english}
{surah.name.阿拉伯语}

);
});
}
调试（'component:SurahsNav'，'Render'）；
让类=类名({
“苏拉赫导航col-md-12 col-xs-12”：正确，
[this.props.className]：正确
});
返回(

{list}

);
}
}

这样怎么样

shouldComponentUpdate（下一个状态，下一个操作）{
返回false；
}
render（）{
var list=this.props.surahs.map（（surah，index）=>{
返回(

{surah.id}
{surah.name.simple}


{surah.name.english}
{surah.name.阿拉伯语}

);
});
}
调试（'component:SurahsNav'，'Render'）；
让类=类名({
“苏拉赫导航col-md-12 col-xs-12”：正确，
[this.props.className]：正确
});
返回(

{list}

);
}
}