为什么 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. The scroll event 被解雇 非常 频繁。
2. 你不需要 listen for scroll passively（不过这是个好主意）。
3. 您设置 style 的频率比需要的高很多。

但是，我认为是第二个代码块导致手机出现故障。
查看 this answer to see why the resize event 在手机上比在桌面上更频繁地触发。

1. 现在，每次触发resize事件时，MainApp的状态 已更新。
2. 每次 MainApp 更新时，React 都会重新计算其所有子项。
3. 默认情况下，React 仅 re-run 渲染每个子项并比较输出。

考虑到您在 MainApp 中拥有所有路由和所有组件并且您没有实施任何优化（React.PureComponent、路由延迟加载等）React 将不得不重新计算整个网站在每个 resize 事件中看起来都像。

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

另一个可能的问题是，通过在 render 方法中附加监听器，您在 每个单独的渲染器上附加了新的监听器，而没有清除任何先前添加的监听器。