React Native联系人获取格式化优化咨询：避免APP卡顿

在React Native中获取用户设备全部联系人并格式化，用于传给后端查询应用内已有用户。部分号码带国家码，部分不带，格式化过程耗时2-3分钟，最终得到的联系人数组如下：

const contacts = [{fullname: "Mark", mobileNumber: "1234567890", cc: "+1"}, {...}, {...}]

获取和格式化联系人的完整代码：

const phoneNumberUtil = PhoneNumberUtil.getInstance();
ContactServices.askForContactPermission((resolve) => {
  BusyIndicator.show()
  console.log("permission", resolve);
  getContacts().then((res) => {
    res.map((c) => {
      if (c?.phoneNumbers[0]?.number) {
        if (c?.phoneNumbers[0]?.number.includes("+")) {
          const phone_parse = phoneNumberUtil.parse(c?.phoneNumbers[0]?.number);
          const country_code = c?.phoneNumbers[0]?.number.includes("+") ? "+" + phone_parse.getCountryCode(c?.phoneNumbers[0]?.number) : ""
          const mobile = phone_parse.getNationalNumber(phone_parse);
          setContacts(prevState => [...prevState, { fullname: c?.givenName, mobileNumber: mobile.toString().replace(/\s/g, ''), cc: country_code }])
        } else {
          setContacts(prevState => [...prevState, { fullname: c?.givenName, mobileNumber: c?.phoneNumbers[0]?.number.toString().replace(/\s/g, ''), cc: "" }])
        }
      }
    })
    getFriendsByContact() // my backend api call when i got all the contacts.
  }).catch((error) => {
    BusyIndicator.hide()
    console.log("error", error);
  })
}, (reject) => {
  BusyIndicator.hide()
  console.log("permission", reject);
}) 

请问当前做法是否存在问题？有哪些优化方向？或者如何静默执行这类耗时操作而不冻结APP？

当前代码的核心问题 #

• 频繁状态更新阻塞线程：在map循环中逐个调用setContacts，每处理一个联系人就触发一次组件重渲染，大量重渲染直接拖慢JS线程，是耗时久、APP冻结的主要原因。
• API调用时机错误：getFriendsByContact()写在map之后，但setContacts是异步更新，此时contacts数组并未完全生成，传给后端的数据不完整。
• 冗余逻辑重复执行：重复判断c?.phoneNumbers[0]?.number.includes("+")，无意义地增加计算量。
• 加载状态未正确关闭：联系人处理完成后未调用BusyIndicator.hide()，加载状态会持续显示。

优化方向与解决方案 #

1. 批量处理+一次性更新状态 #

先将所有联系人处理为目标格式的数组，再一次性更新状态，彻底避免频繁重渲染：

getContacts().then((res) => {
  const formattedContacts = res.reduce((acc, c) => {
    if (!c?.phoneNumbers[0]?.number) return acc;
    
    const rawNumber = c.phoneNumbers[0].number;
    let contactItem;

    if (rawNumber.includes("+")) {
      const phone_parse = phoneNumberUtil.parse(rawNumber);
      const country_code = `+${phone_parse.getCountryCode()}`;
      const mobile = phone_parse.getNationalNumber().toString().replace(/\s/g, '');
      contactItem = { fullname: c.givenName, mobileNumber: mobile, cc: country_code };
    } else {
      const mobile = rawNumber.toString().replace(/\s/g, '');
      contactItem = { fullname: c.givenName, mobileNumber: mobile, cc: "" };
    }

    acc.push(contactItem);
    return acc;
  }, []);

  setContacts(formattedContacts);
  // 直接传处理好的数组，不依赖异步状态更新
  getFriendsByContact(formattedContacts);
  BusyIndicator.hide();
})

2. 后台线程执行耗时操作 #

React Native的JS线程是单线程，号码解析这类CPU密集型任务会阻塞UI。可以使用react-native-background-task（原生项目）或expo-task-manager（Expo项目）将解析逻辑移至后台：

• 先获取原始联系人数据，将解析任务提交到后台线程。
• 后台处理完成后，通过事件通知主线程更新状态并调用API。

3. 优化号码解析逻辑 #

• 对无国家码的号码，可通过react-native-localize获取设备默认国家码，补全后再解析，减少后端处理歧义。
• 缓存已解析的号码，若遇到重复号码直接复用结果，避免重复计算。

4. 分段处理超大联系人列表 #

如果用户联系人数量极大（比如上千条），可将处理逻辑拆分为多个小批次，用requestIdleCallback或setTimeout分段执行，给UI线程留出响应间隙：

function processBatch(contacts, startIndex, batchSize) {
  const endIndex = Math.min(startIndex + batchSize, contacts.length);
  for (let i = startIndex; i < endIndex; i++) {
    // 单条联系人处理逻辑
  }
  if (endIndex < contacts.length) {
    requestIdleCallback(() => processBatch(contacts, endIndex, batchSize));
  } else {
    // 所有批次处理完成，更新状态+调用API
  }
}

// 调用示例：每次处理50条
processBatch(res, 0, 50);

5. 异常处理与用户体验优化 #

• 捕获PhoneNumberUtil.parse可能抛出的异常，避免单个无效号码中断整个处理流程。
• 替换全屏加载指示器为轻量提示（比如顶部Toast），让用户感知到后台在处理但不阻塞操作。

避免APP冻结的核心原则 #

1. 绝对禁止循环内更新状态：批量处理后一次性更新是减少重渲染的最有效手段。
2. CPU密集型任务移至后台：释放JS线程专注处理UI交互。
3. 分段处理超大数据集：避免长时间占用JS线程导致界面无响应。

内容的提问来源于stack exchange，提问作者Akib Shaikh