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

在 shouldComponentUpdate 中使用 lodash

Using lodash in shouldComponentUpdate

reactjs

redux

react-redux