Question

这被认为是最佳做法吗？还是有更好的解决方案来防止不必要的重新渲染？

我正在尝试渲染数千行。每行有很多单元格。但是当我在我的一个减速器中更新不相关的状态时，我很难防止出现瓶颈。

import React, { Component } from 'react'
import _ from 'lodash'

import Cell from './Cell'

export class Row extends Component {

  shouldComponentUpdate (newProps) {
    return !_.isEqual(newProps.item, this.props.item)
  }

  componentDidUpdate (prevProps, prevState) {
    console.log('row is updated!')
  }

  render () {
    const { item } = this.props

    return (
      <div className='rowek'>
        {item.map((i, key) => <Cell key={key} item={i}/>)}
      </div>
    )
  }
}

export default Row

Answer 1

我有类似的经验来构建日历，其中每个日期都包含异步数据。

我的建议：

ShouldComponentUpdate会降低应用程序的性能，react的默认行为已足以处理这种情况，并避免在数据未发生更改时重新呈现。您还可以查看：https://facebook.github.io/react/docs/react-api.html#react.purecomponent
测试您的应用程序在生产环境中是否实际上很慢。（缩小文件，没有动作记录器等）。
key={key}我不相信这是我单元格的关键，尝试预先添加行数或更具体的内容。
有没有办法可以直接用状态属性映射每个单元格？（我不知道你所在国家的设计）

@ Cell.js

const mapStateToProps = (state, { index }) => ({
    item: selectItemByCellIndex(index),
});

在shouldComponentUpdate中使用lodash

1 个答案: