javascript - React.js 移动网站在 Android 上的 Chrome 中卡住

Question

我们遇到了 React.js 网站无法运行的问题，特别是在 Chrome/Android 上。无法在其他浏览器或平台中复制它(桌面总是流畅)。

它似乎与首页有关，很可能与正在加载的图像数量有关。由于某种原因，其他浏览器(甚至 iOS 上的 Chrome)似乎并没有遇到困难。

我无法用一个简单的示例重新创建它，但可以在我们的开发站点 https://beta.fotmob.com 找到一个有效的、实时的示例。 ，您可以看到它在随机单击几次后卡住(使用 Android 上的 Chrome)。该网站是服务器渲染的，除了顶部的 Facebook 广告之外，所有组件都是 React 组件(针对 FB 广告代码具有危险设置InnerHTML 的 React 组件)。

关于任何类型的覆盖(特别是底部的搜索按钮或顶部的日历)，还有另一个奇怪的问题:关闭搜索或选择日期是一个 touchend 事件，它似乎“粘住”，然后将触发下面的超链接(比赛或联赛)，尽管有元标记:meta name="viewport"content="initial-scale=1, width=device-width"

点击次数没有“通过”；它们肯定会在覆盖层被移除后出现，但 300 毫秒的延迟不应再出现。无论如何，我不认为这是卡住的原因，但我认为这可能值得一提。

对于可能导致问题的原因，或者为什么它是特定于浏览器的，您有什么想法或想法吗？

编辑:只是在这里添加解决方案，供那些不想继续阅读的人使用。

卡住问题:由多次 setTimeout 调用导致，这些调用在页面加载后修改了状态。然而，为什么它会在 Android 上的 Chrome 中引起问题仍然是个谜。也许 Android 上的 Chrome 处理状态更改或大量 JS 调用的方式有所不同。

双击问题:这似乎是 React 或 Chrome 中的错误。基本上，无论元标记如何，超链接都会在 0.3 毫秒延迟后触发，但 onClick 不会。所以 onClick 正在按预期工作。解决方法是将实际导航从 href 移至 onClick。

Answer 1

我设法解决了这两个问题。

卡住问题:由多次 setTimeout 调用导致，这些调用在页面加载后修改了状态。然而，为什么它会在 Android 上的 Chrome 中引起问题仍然是个谜。也许 Android 上的 Chrome 处理状态更改或大量 JS 调用的方式有所不同。

双击问题:这似乎是 React 或 Chrome 中的错误。基本上，无论元标记如何，超链接都会在 0.3 毫秒延迟后触发，但 onClick 不会。所以 onClick 正在按预期工作。解决方法是将实际导航从 href 移至 onClick。