我在移动设备上的 React 应用 freezes/lags

Question

我创建了一个应用程序，但它在移动设备上冻结，我不知道是什么问题。

netlify 上的应用程序：https://mlvo.netlify.app/

在电脑上它工作得很好而且很流畅，但在移动设备上它在登陆页面时工作，但是在 2/3 操作之后，它冻结了。

有人可以帮我吗？

Answer 1

打开您的应用程序并检查控制台，您可以看到它在桌面上也无法正常工作。从 Planning.js 调用了无限 console.log。

你需要回去看看是什么原因造成的。（在没有看到代码的情况下，这看起来像是 useEffect 导致无限重新渲染并命中控制台日志的问题。）

它在台式机上似乎没问题的原因可能是因为台式机比手机拥有更多的资源，所以您从重复的控制台日志中看不到那么多性能 drop-off。

Answer 2

看起来有一个副作用会触发您的应用运行无限循环。

为什么会这样

你有 2 个 useEffects 第一个在组件安装后加载，点击 api，并将您的状态设置为 response.data。第二个将事件列表作为其依赖项之一，当依赖项更改时，反应会触发另一个重新渲染，因此依赖项更改，依此类推。

const [eventList, setEventList] = useState([]);

useEffect(() => {
    Axios.get('https://mlvo-planning.herokuapp.com/read').then((response) => {
      setEventList(response.data);
    })

  });

  useEffect(() => {
    if(eventList){
    eventList.map((l)=>{
      console.log(moment(l.eventDate, "DD-MM-YYYY").format("ddd DD MMM"));
    });
  }
  },[eventList]);

如何防止这种行为？

通过正确管理 useEffect(callback, dependencies) 依赖项参数来修复无限循环。

避免无限循环的有效方法是正确管理挂钩依赖项——控制 side-effect 应该运行.

的确切时间

我强烈建议您阅读有关 useEffect hook

的更多信息

我在移动设备上的 React 应用 freezes/lags

My react app freezes/lags on mobile devices

javascript

node.js

reactjs

react-hooks

为什么会这样

如何防止这种行为？