预估项目大小属性

estimatedItemSize 是一个数值，用于向 FlashList 提示项目在渲染之前的大概大小。然后 FlashList 可以使用此信息来决定在初始加载和滚动时需要在屏幕上绘制多少个项目。如果大多数项目是 **不同大小** 的，您可以考虑使用平均值或中位数，如果大多数项目是 **相同大小** 的，则直接使用该数字。快速查看 元素检查器 可以帮助您确定这一点。如果您在两个值之间感到困惑，则较小的值是更好的选择。

如何计算

• 使用首次渲染的平均项目大小 - 如果您未指定 estimatedItemSize，这将是警告的一部分。
• 如果大多数项目具有 **相似的高度** 或 **宽度**（如果是水平方向），只需从 react-native 的开发菜单中打开元素检查器，检查其中一个项目的大小，然后使用它。不用担心不同的设备。我们有足够的容差来解决这个问题。
• 如果项目 **有很多不同的大小**，选择几个差异很大的项目，使用元素检查器，读取它们的大小，然后计算平均值。这个平均值会很好用，不用担心针对不同的设备尺寸进行求解。内部有足够的容差。
• 如果您遇到多个值看起来都适合的情况，请选择较小的一个。

深入了解

FlashList 在其子项渲染之前不知道它们的大小。当列表加载时，它需要决定渲染多少个项目。这里只有几个选择

• 渲染固定数量的项目： 在加载时要渲染的默认项目数量可能不适用于所有设备，并且理想情况下它应该取决于屏幕大小。绘制较少的项目会在加载时显示空白区域，而绘制太多会增加加载时间。
• 对 estimatedItemSize 使用默认值： 如果我们在启动时对项目使用默认大小，我们仍然会遇到问题。假设我们使用 50px 作为默认值，而您没有意识到这一点，并且您正在渲染一个具有较大项目的列表，例如新闻源，其中项目很复杂。假设实际渲染的大小约为 500px。基于此假设，如果屏幕大小为 1000px，我们将加载时绘制 20 个项目，而我们应该只绘制 2 个。这个结果不是最优的，您甚至可能没有意识到加载速度可以快多少。
• 从开发者那里获取 estimatedItemSize： 我们不是试图隐藏这个要求，而是让您做出决定。我们已决定使用大小估计而不是要渲染的初始计数，因为大小是跨设备尺寸更稳定的值。

我们目前保持 estimatedItemSize 可选，但 **强烈** 建议您设置它。如果您不这样做，您将收到一个警告，建议将其设置为等于首次渲染的平均项目大小的值。

对滚动的影响

在非常快速的滚动期间，如果偏移量变化非常快，FlashList 可能会遇到需要准备多个项目的情况。这只是相同问题的另一个版本。如果您的估计值与实际大小相比太大，FlashList 可能会认为少量项目足以填充屏幕，您可能会看到空白。*这是我们建议在您对两个值感到困惑时使用较小值的首要原因。* 绘制多几个项目比显示空白更好。使用 FlashList，我们不希望看到空白，除非组件非常慢或 estimatedItemSize 与实际大小相比太大。

绘制的项目数量对响应速度的影响

屏幕上有一些项目对于性能和响应能力很有帮助。小型渲染树更新速度更快。假设您的列表项中有一个复选框，并且您将其选定状态存储在存储中。您希望此复选框在更改状态时具有极高的响应速度，而拥有大型渲染树会阻止这种情况发生。你们中的许多人可能在 FlatList 中看到过这个问题。

FlatList 的默认 windowSize 为 21，这意味着，在一个 1000px 高的设备上，它将在当前可见窗口的底部和顶部绘制大约 10,000px。相比之下，FlashList 只会在顶部和底部额外绘制 250px，而不管屏幕大小。当我们的项目数量非常少时，您会惊讶地发现事情变得多么有响应性，这就是为什么我们如此关心它。

拥有错误的 estimatedItemSize 的影响

• 请注意，由于此处提供的值不正确，FlashList 不会重叠或在项目之间显示间隙。
• 如果估计值远高于实际值，您可能会看到屏幕上加载了少量项目，然后立即会出现更多项目。在快速滚动期间，您可能会看到一些空白区域。这不是因为事情变得缓慢了。列表只是不知道它没有绘制足够的项目。一旦列表知道项目的实际大小，它就不会依赖估计值，这就是为什么在向上滚动时您可能看不到同样的问题。

• 如果估计值远小于实际值，则可见地不会发生太大变化，但您将绘制超出必要的项目。如果您的组件很复杂，则加载时间可能会增加。

未来修订

我们正在研究利用 Fabric 来消除此要求的方法。短期内，我们计划在初始加载后计算此平均值，以防止在快速滚动期间出现问题。提供的值对于加载时间优化也将更相关。