Reactjs 在shouldComponentUpdate中使用lodash

这被认为是最佳实践吗？还是有更好的解决方案来防止不必要的重新招标

我正在尝试渲染数千行。每行有许多单元格。但当我更新我的一个还原程序中的非相关状态时，我很难防止瓶颈

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

import React，{Component}来自“React”
从“lodash”导入
从“./Cell”导入单元格
导出类行扩展组件{
shouldComponentUpdate（新道具）{
return！\u0.isEqual（newProps.item，this.props.item）
}
componentDidUpdate（prevProps、prevState）{
console.log（'行已更新！'）
}
渲染（）{
const{item}=this.props
返回(
{item.map（（i，key）=>）}
)
}
}
导出默认行

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

我的建议：

• ShouldComponentUpdate会降低应用程序的性能，react的默认行为已经足以处理这种情况，并避免在数据未更改时重新渲染。 此外，您还可以查看：

• 测试您的应用程序在生产环境中是否运行缓慢。（缩小文件、无动作记录器等）

• key={key}

  我不相信这是我的单元格的键，请尝试预先指定行数或更具体的数字

• 有没有一种方法可以将每个单元格直接映射到状态的属性？（我不知道你们州的设计）

@Cell.js

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

---

我有一个类似的结构，我也使用shouldComponentUpdate。是的，这是正常的，如果您使用的是最新版本的React，您可以使用

类行扩展PureComponent

，它正好做到这一点。我可以使用直接引用，但我还想过滤行并执行一些其他逻辑。ImmutableJs可能是唯一的答案？我不认为ImmutableJs会让这更好，因为您的状态仍然表示更改，尝试直接将行引用到您状态的一部分，这是我在日历场景中所做的，我的约会只是重复本周的数据。这对我没有什么帮助，但我很感谢你抽出时间。我应该多贴些例子/