如何在React Native中处理屏幕上1000个组件的性能？

Question

我正在制作一个有32x64网格的应用程序，当您单击任何正方形时，它会亮起。我希望用户能够拖动其手指，并使其填满手指触摸的所有方块。

我基本上是将组件的状态设置为所有正方形的数组，并且当用户触摸屏幕时，它将状态切换为新的正方形数组（又填充了一个正方形）并呈现视图。

在屏幕上有如此多的正方形（组件）并进行重新渲染时，我的手机上的性能确实很差。它在我的计算机电话模拟器上很不错，但可能会更好。我曾尝试向阵列中的所有平方添加键，然后将平方从常规组件更改为纯组件，尽管这样做确实有助于提高性能，但它可能会好很多。

研究了一段时间后，我决定需要伸出援手。我正在尝试为iPhone做这些事情，所以，如果我想获得更好的性能，或者我是否应该通过其他方法来优化React Native中许多组件的性能，那么我应该迅速做整个事情吗？

Answer 1

返回多个节点时需要键。 PureComponent可能会有所帮助，但您可以使用另外两种技术。

1. 使用更简单的功能性无状态组件。
2. 引入<Row />组件来划分更新复杂度。