Using lodash in shouldComponentUpdate

Question

这被认为是最佳实践吗?或者是否有更好的解决方案来防止不必要的重新渲染?

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

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