为什么 React 应用程序在移动设备上冻结？ [关闭]

Question

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

https://summerresort.netlify.app

和代码

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

谢谢！

Answer 1

您的应用看起来一切正常，除了 2 分。我无法测试我的猜测，但我几乎可以完全确定您的问题来自这 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. The scroll event 经常非常被解雇。
2. 你不要listen for scroll passively（不过这是个好主意）。
3. 您设置style 的频率比需要的频率高得多。

但是，我认为这是导致手机出现故障的第二个代码块。
查看this answer，了解为什么the resize event 在手机上的触发频率高于在桌面上的触发频率。

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

考虑到您在 MainApp 中拥有所有路由和所有组件，并且您没有实现任何优化（React.PureComponent、路由延迟加载等）React 将不得不重新计算整个站点在每个站点上的样子resize 事件。

最简单的解决方法是将currentPageWidth 存储在a ref 而不是状态中。

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