React Native：优化的SectionList在scrollToLocation

Question

我构建了一个滚动SectionList的字母擦洗器。 SectionList通过使用getItemLayout进行优化。如果我擦洗字母表，滚动按计划进行，但是在我从屏幕上松开手指之前，SectionList不会重新渲染。

See this expo snack

关于如何解决这个问题的任何想法？

Answer 1

通过浏览PanResponder的源代码解决了这个问题。 PanResponder通过InteractionManager设置交互句柄。您可以通过this.panResponder.getInteractionHandle()（未记录的功能）访问此句柄，然后每次滚动到SectionList中的某个位置时清除它：

if (this.panResponder.getInteractionHandle()) {
    InteractionManager.clearInteractionHandle(
        this.panResponder.getInteractionHandle()
    );
}

这会将SectionList向上移动到队列中以进行可见性计算和渲染。

我建议通过尽可能少地清除交互句柄来对此进行大量优化，因为出于性能原因使用了InteractionManager。

Answer 2

要使sectionList动态更新，您需要将其使用的数据放入State。这个世博会的例子（由其他人完成）就是一个很好的例子：

https://snack.expo.io/Syy1bqKxW

他的panResponder的所有数据都处于状态和每个＆＃34; handlePanResponderMove＆＃34;他每次移动时都会调用setState（）来更新位置。总而言之，如果您的数据未处于状态，则不会动态更新。在React-Native中将数据置于状态是它如何动态跟踪数据更改。

希望这有帮助！