如何在缓慢时加快本机反应中的联系人处理速度？

Question

我一直致力于组合一个模块，以允许用户邀请他们的朋友使用应用程序。 代码运行没有大问题，但由于我的手机中有 100 多个联系人，因此速度相当慢。 滚动不是问题，我可以在手机拉数据时添加加载程序。 但是当我选择一个元素进行突出显示时，需要几秒钟才能检查该项目。 我很好奇是否有人对如何优化有任何提示？

我的点心如下：

https://snack.expo.io/@fauslyfox110/testingreferrals

主文件：inviteScreenTwo.js

Answer 1

每当您更改状态时，React 都会更新屏幕上的元素。 在您的情况下，我怀疑延迟是由于 React 会检查您显示的所有联系人记录，并在您更改突出显示时更新它们。

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

另一种方法是为您的记录组件覆盖生命周期方法shouldComponentUpdate ，确保仅在其突出显示状态更改时shouldComponentUpdate 。 这称为和解回避。 该方法具有以下签名：

shouldComponentUpdate(nextProps, nextState) {
}

默认情况下，此方法始终返回true 。 您可以更改它以将nextProps与this.props进行比较，检查突出显示是否已更改，并根据需要返回true或false 。 在React 文档中阅读有关此优化的更多信息。