如何在 Ionic React 中每帧执行代码？答案

【问题标题】：How do I execute code every frame in Ionic React?如何在 Ionic React 中每帧执行代码？
【发布时间】：2021-01-25 11:24:45
【问题描述】：

首先，我对 Ionic、React 和 JSX 完全陌生，对 JS 也很陌生。出于学习目的，我想玩“迷你实验性放置游戏”之类的东西。

现在，我正在尝试每帧更新一些字段并进行一些计算。我知道这将非常消耗 CPU 和电池电量（在移动设备上），但我特别想要这种行为。我已经设置了我的tsconfig.json { "strict": false }，所以我可以使用我比较习惯的普通JS。

也就是说，我有这个元素：

var count = 0;

<IonCardTitle>
    <span id="fieldCount">{count}</span> Things
</IonCardTitle>

我知道想要的是每帧都运行这样的东西：

if(count < 1000000) {
    document.querySelector('#moneycount').innerHTML = count.toString();
    count++;
}

我将如何更改元素每一帧的.innerHTML并增加count？

【问题讨论】：

标签： reactjs react-native ionic-framework

【解决方案1】：

您可以使用setInterval，并在每个间隔增加计数。例如：

const interval = setInterval(() => {
    count = count + 1;
    if (count >= 1000000) {
        // use clearInterval to stop interval execution
        clearInterval(interval);
    }
}, 10); // every 10ms, could be more or less depending on your needs

无需更新innerHTML，因为您的组件会动态呈现计数。

【讨论】：

我已将您的建议添加到 ExplroeContainer.tsx（我在 sidemenu-template 中），并且在页面加载然后停止时它最多计数 2。如何让间隔连续运行？
我刚刚意识到间隔一直在后台运行，但 Ionic/React 不会在运行时更新显示的值，而只会在页面重新加载时更新（例如，通过导航到另一个页面然后返回） .我需要它实时更新。这可能吗？
我很高兴它有帮助！

【解决方案2】：

我通过 Gabriels 的回答强制 React 连续渲染。

我在 index.tsx 中添加了以下内容：

const interval = setInterval(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
}, 50); // every 50ms

根据React，渲染器只更新调用时需要更新的内容，所以我相信这实际上是要走的路。

【讨论】：