React 本机应用程序中的一个简单致命异常

这是一个典型的周五晚上，一切都按计划进行。我们的 React Native 应用程序的最新版本刚刚通过 Play Console 投入生产，并针对 30% 的用户进行了受控部署。然而，当 Google Analytics 仪表板中出现严重警报时，我们的常规感突然被打破：无崩溃用户率从 99% 骤降到 92%。这一惊人的下降引发了红色代码的情况。

感谢我非常勤奋的团队，我们立即召开了电话会议，即使是在半夜。利用 Google 崩溃分析工具，我们分析了堆栈跟踪并跟踪了跨屏幕的用户行为。尽管有这些见解，我们仍无法确定重现崩溃的一致模式。唯一合理的理论是代码中意外的提前返回语句可能是造成这种情况的原因。

找到错误
由于用户行为没有明显的模式，我们转向代码库中的版本差异。我们仔细审查了每一行代码，并梳理了 150 多个 Git 差异，寻找异常情况。然而，难以捉摸的提前退货声明仍未被发现。尽管如此，我们还是实施了一系列优化并将更新推送到生产环境。虽然事故在 12 小时后再次发生，但频率已显着下降。

突破来得很突然。在开发一个单独的功能时，我的互联网连接短暂离线，而我碰巧打开了该应用程序。令我惊讶的是，致命错误就出现在我眼前。

错误

  const {isConnected} = netState();
   if (!isConnected){
    return;
  }
  const calculateMyView = useCallback(() => {
    // ...some code
  },[]);

经过大量调试，我们将问题追溯到深埋在我们的一个组件中的早期返回语句。这个微妙的错误在特定情况下导致了崩溃：当用户重新连接到稳定的互联网连接时，导致组件尝试重新渲染。

内部发生了什么？
初始渲染
在初始渲染期间，React 按照调用的确切顺序注册每个钩子（例如 useCallback）。钩子存储在内部列表中，按其在组件树中的位置进行索引。
后续渲染
在重新渲染时，React 希望以相同的顺序和相同的位置调用钩子。如果这个顺序发生变化——例如，由于提前返回语句跳过了钩子的执行——内部列表就会变得不对齐。然后 React 尝试访问未执行的钩子（例如，位置 1），导致错误。
这次崩溃被识别为 com.facebook.react.common.JavascriptException，发生的原因是 React 渲染的钩子数量少于预期——这是由于提前返回错误而跳过有状态逻辑的典型症状。这种行为违反了 React 的钩子规则，该规则要求钩子执行的顺序在渲染之间保持一致。因此，如果互联网连接断开，堆栈上有此屏幕的任何用户都会遇到崩溃。

修复

  const {isConnected} = netState();
   if (!isConnected){
    return;
  }
  const calculateMyView = useCallback(() => {
    // ...some code
  },[]);

为了解决这个问题，我们重新排序了逻辑，以确保 return 语句不再中断 hooks 的执行流程。通过这次调整，我们遵循了 React 的声明性原则，稳定了重新渲染过程，并消除了崩溃。

这次经历有力地提醒了我们遵循 React 的钩子规则并避免渲染逻辑中的条件返回的重要性。这些原则对于维护 React 应用程序的完整性和稳定性至关重要。

以上是React 本机应用程序中的一个简单致命异常的详细内容。更多信息请关注PHP中文网其他相关文章！