Javascript 当速度较慢时,如何在react native中加快联系人处理?

Javascript 当速度较慢时,如何在react native中加快联系人处理?,javascript,arrays,reactjs,react-native,Javascript,Arrays,Reactjs,React Native,我一直在设计一个模块,允许用户邀请他们的朋友使用应用程序。代码工作没有大问题,但由于我的手机中有100多个联系人,速度相当慢。滚动不是问题,我可以在手机提取数据时添加一个加载器。但是当我选择一个元素作为高亮显示时,需要几秒钟的时间来检查该项。我很好奇是否有人对如何优化有什么建议 我的零食如下: 主文件:inviteScreenTwo.jsReact将在您更改状态时更新屏幕上的元素。在您的情况下,我怀疑延迟是由于您在更改突出显示时浏览了所有联系人记录并进行了更新 处理这种情况的一种方法是确保屏幕

我一直在设计一个模块,允许用户邀请他们的朋友使用应用程序。代码工作没有大问题,但由于我的手机中有100多个联系人,速度相当慢。滚动不是问题,我可以在手机提取数据时添加一个加载器。但是当我选择一个元素作为高亮显示时,需要几秒钟的时间来检查该项。我很好奇是否有人对如何优化有什么建议

我的零食如下:


主文件:inviteScreenTwo.js

React将在您更改状态时更新屏幕上的元素。在您的情况下,我怀疑延迟是由于您在更改突出显示时浏览了所有联系人记录并进行了更新

处理这种情况的一种方法是确保屏幕外的联系人实际上不在DOM中。您需要更新
render
方法,以便在列表中仅放置实际可见的联系人记录。这样,React就不需要更新那么多的元素。请参阅以了解有关此优化的更多信息

另一种方法是覆盖记录组件的生命周期方法
shouldComponentUpdate
,确保只有在其突出显示的状态发生更改时才重新加载。这称为避免和解。该方法具有以下签名:

shouldComponentUpdate(nextProps, nextState) {
}
默认情况下,此方法始终返回
true
。您可以将其更改为将
nextrops
this.props
进行比较,检查突出显示是否已更改,并根据需要返回
true
false
。请在中阅读有关此优化的更多信息