Question

当渲染许多组件时，我遇到了性能问题，它们都需要redux存储中的数据。我该怎么做才能解决此问题？

我正在开发一个桌面应用程序，该应用程序看起来像是使用electronicJs和reactJs的图片编辑器。

我的redux商店看起来像这样：

store = {
    palettes: {
        palette1: [
            {r: 255, g:   0, b:   0, a: 255},
            {r:   0, g: 255, b:   0, a: 255},
            {r:   0, g:   0, b: 255, a: 255}
        ],
        palette2: [ ... ]
    },
    pictures: {
        picture1: {
            palette: "palette1",
            pixels: [0, 1, 2, 0, 1, 2 ...]
        }
    }
}

我的组件

class Picture extends Component {
    render = () => {
        return (
            <div>
                {Array(1024).fill(0).map((_, index) =>
                  <Pixel index={index} pictureName={this.props.name} />
                )}
            </div>
        )
    }
}

class Pixel extends Component {
    render = () => {
        return (
            <div
              style={{
                width: 2,
                height: 2,
                backgroundColor: this.props.color
              }}
              onClick={/*change this pixel color and dispatch*/}
            >
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps) => {
    let colorIndex = state.pictures[ownProps.pictureName].pixels[ownProps.index]
    let paletteName = state.pictures[ownProps.pictureName].palette
    let color = state.palettes[paletteName][colorIndex]
    return {
        color: getRGBA(color)
    }
}

助手功能

export const getRGBA = ({ r, g, b, a }) => {
  return `rgba(${r}, ${g}, ${b}, ${a / 255})`
}

图片有点像索引彩色PNG。

渲染1024个像素需要太多时间。

第一次尝试时，我检索了图片中所需的所有数据，并将颜色直接赋予像素。但是，当我对像素进行修改时，它会重新渲染所有像素，这很费时间。

使用reselect甚至re-reselect使用正确的选择器可以解决该问题吗？（我真的不知道该怎么做）

我还尝试记住getRGBA，但是此功能应该不会很耗时。

许多元素从存储中检索数据的性能问题

0 个答案: