更改redux状态后如何避免重新渲染10000个imageComponent？

Question

我正在使用react + redux。我在父组件中有100000（示例）ImageComponent，例如ImageGrid。每个ImageComponent的功能是，用户可以喜欢，删除和选择。

问题是，当我喜欢，删除或选择任何单个ImageComponent时，我会在redux中更新它的状态，并且在每次状态更改时，它都会呈现整个100000 ImageComponent。

如何避免对那些没有改变的ImageComponent进行不必要的重新渲染？

Answer 1

您可以将shouldComponentUpdate添加到ImageComponent，以防止其道具/状态未发生变化时重新呈现。

如果您的道具很浅，可以将其声明为React.PureComponent。如果ImageComponent连接到Redux，则会自动完成（如果mapStateToProps返回相同的道具，则不会重新呈现）。

你可能不应该一次渲染10000个组件。试试react-virtualized。

此外，您应为每个组件提供unique and stable key。