在 shouldComponentUpdate 中使用 lodash

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