反应渲染-性能

Question

我的react渲染在移动设备中缓慢运行。 我的组件呈现了一些项目的列表。这是渲染方法。

return (
          <div className={ bemCn('columns-container') }>
            { isLanding && isMobileMode && this.renderTabs(platform) }
            <div className={ bemCn('columns', {isLanding: isLanding}) }>
              <div className={ bemCn('column').mix(bemCn('counters', {isLanding: isLanding, isMobileModeAndLanding: isMobileMode && isLanding})) }>
                {this.props.table.rows.map(row => (
                  <div className={ bemCn('counters-item') } key={ row }>
                    {this.props.from + row}
                  </div>
                ))}
              </div>

              {columnsCategory[platform].map(column => (
                <div key={ column } className={ bemCn('column', {isLanding: isLanding}) }>
                  <div className={ bemCn('title', { [column]: true, isLanding: isLanding }) }>{TITLES[column]}</div>
                  <ul className={ bemCn('list') }>
                    {this.props.table.rows.map(idx => {
                      const item = columns[column]
                        ? columns[column].find(item => item.position === idx + 1)
                        : null

                      if (!item) {
                        return <li key={ idx } className={ bemCn('list-item', { empty: true, isLandingAndEmpty: isLanding }) } />
                      }

                      if (!applications[item.app_id]) return null

                      let modifier
                      let prefix
                      let positionChangeValue
                      const yesterdayPosition = yesterday[`${item.app_id}:${column}`]

                      if (yesterdayPosition) {
                        modifier = item.position < yesterdayPosition ? 'up' : 'down'
                        prefix = item.position < yesterdayPosition ? '+' : '-'
                        positionChangeValue = Math.abs(item.position - yesterdayPosition)
                      }

                      const isBlur = chartsTypeFilterSet.size ? this.checkBlur(item.app_id, publishers, advertisers, chartsTypeFilterSet) : false
                      return (

                        <li key={ idx } className={ bemCn('list-item', { blur: isBlur, isLanding: isLanding })() }>
                          <Link className={ bemCn('link', {isLanding: isLanding}) } to={ this.getLink(item.app_id, applications[item.app_id].slug) }>
                            {isLanding && <div className={bemCn('mobile-counter', {isMobileMode: isMobileMode})}>{ idx + 1 }</div>}
                            <div className={ bemCn('icon') }>
                              <img
                                src={ setImageSize({
                                  url: applications[item.app_id].icon_url,
                                  platform,
                                  size: 44
                                }) }
                                alt={ applications[item.app_id].name }
                              />
                            </div>
                            <div className={ bemCn('info', {isLanding: isLanding}) }>
                              <div className={ bemCn('info-names') }>
                                <div className={ bemCn('publisher').mix('u-text-ellipsis') }>
                                  {applications[item.app_id].developer.name}
                                </div>
                                <div className={ bemCn('name').mix('u-text-ellipsis') }>
                                  {applications[item.app_id].name}
                                </div>
                              </div>
                              <div className={ bemCn('rating') }>
                                {!!item.rating && <StarRatings rating={ item.rating } starDimension="12px" starSpacing="1px" />}
                                {publishers[item.app_id] && (
                                  <SimpleTip tip="Advertising monetization of this app" noWrap>
                                    <div className={ bemCn('pub-icon')() }>Pub</div>
                                  </SimpleTip>
                                )}
                                {advertisers[item.app_id] && (
                                  <SimpleTip tip="Advertising campaigns of this app" noWrap>
                                    <div className={ bemCn('pub-icon', { ad: true })() }>Ad</div>
                                  </SimpleTip>
                                )}
                                {!isLanding && fb[item.app_id] && (
                                  <SimpleTip tip="fb" noWrap>
                                    <div className={ bemCn('pub-icon', { fb: true })() }>Fb</div>
                                  </SimpleTip>
                                )}
                              </div>
                            </div>
                            <div className={ bemCn('changes') }>
                              <div className={ bemCn('price') }>
                                {item.price === 'FREE' || item.code === 'FREE' ? 'FREE' : null}
                                {item.price !== 0 && (
                                  <span>
                                  {item.code} {item.price}
                                </span>
                                )}
                              </div>
                              {positionChangeValue !== 0 && (
                                <div className={ bemCn('changes-value', { [modifier]: true }) }>
                                  {prefix}
                                  {positionChangeValue}
                                </div>
                              )}
                            </div>
                          </Link>
                        </li>
                      )
                    })}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        )
      }

我不知道为什么渲染这么慢。在此渲染器中，我经常使用构造 className = {bemCn（'info'，{isLanding：isLanding}）} （选中 isLanding ）。如果我需要渲染> 100个项目，这种构造对性能有何影响？