为什么React应用程序在移动设备上冻结

Question

我用react做了一个小应用程序，它在我的电脑上运行顺利。然而，当我在不同的移动设备上打开它时，它在使用一分钟左右后就会崩溃。我不知道是什么原因导致了这个问题，但奇怪的是，我的控制台上没有任何错误或警告，也没有使用componentDidUpdate或可能导致useEffect等无限循环的挂钩。如果你知道是什么原因导致react应用程序在移动设备上出现故障，或者遇到了同样的问题并找到了解决方案，请帮助我。这是应用

https://summerresort.netlify.app

和代码

https://github.com/Mahmoud-farargy/summerresort/tree/master/Beach-Resort

谢谢！

Answer 1

除了2分外，您的应用程序看起来一切正常。我无法检验我的猜测，但我几乎完全可以肯定你的问题来自这两个。

看起来有问题的两个部分都位于index.js中，这里有：

window.addEventListener("scroll", () => {// gets the current height
let  scroll = document.body.scrollTop || document.documentElement.scrollTop;
let arrowUp = document.querySelector(".arrow-up-btn").style;
scroll >= 1000 ? arrowUp.display="flex" : arrowUp.display = "none";
});
window.addEventListener("resize", ()=> {// gets the current width
this.setState({
currentPageWidth: window.innerWidth || document.documentElement.clientWidth
})
});

第一个代码块是昂贵的，因为：

1. 滚动事件被频繁地触发
2. 你不会被动地听滚动(不过这是个好主意(
3. 您设置style的频率比需要的频率高得多

然而，我认为，这是导致手机出现故障的第二个代码块。
看看这个答案，看看为什么调整大小事件在手机上比在桌面上更频繁。

1. 现在，每次触发调整大小事件时，MainApp的状态已更新
2. 每次更新MainApp时，React都会重新计算其所有子级
3. 默认情况下，React只重新运行每个子级的渲染；比较输出

考虑到你有所有的路线&CCD_ 5&您没有实现任何优化(React.PureComponent、路由的延迟加载等(React将不得不重新计算每个resize事件上整个站点的样子。

最简单的修复方法是将currentPageWidth存储在ref而不是state中。

另一个可能的问题是，通过在render方法中附加侦听器，您将在每个渲染上附加新的侦听器，而不清除任何以前添加的侦听器。