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

Question

首先，我对 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

？

Answer 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

，因为您的组件会动态渲染计数。

Answer 2

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

我将以下内容添加到index.tsx中：

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

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