Question

我一直在努力构建一个模块，以允许用户邀请其朋友使用应用程序。代码可以正常工作，但是由于手机中有100多个联系人，因此速度相当慢。滚动不是问题，我可以在手机提取数据时添加一个加载器。但是，当我选择突出显示元素时，需要花费几秒钟的时间来检查该项目。我很好奇，如果有人对如何优化有任何建议？

我的小吃在下面：

主文件：InvitationScreenTwo.js

Answer 1

每当您更改状态时，React都会更新屏幕上的元素。就您而言，我怀疑延迟是由于React浏览所有联系人记录所显示的内容并在您更改突出显示时对其进行了更新。

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

另一种方法是为记录组件覆盖生命周期方法shouldComponentUpdate，确保只有当其突出显示的状态发生变化时才重新呈现。这称为避免和解。该方法具有以下签名：

shouldComponentUpdate(nextProps, nextState) {
}

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