时间戳

首页 > 解决方案 > 为什么 IF 语句会导致循环

javascript - 为什么 IF 语句会导致循环

问题描述

我有这样一段简单的代码：

ReactDOM.render(<Change />, document.getElementById('app'));

function Change() {
    const [i, setI] = React.useState(0);
    let rnd = 9;
    if (i !== rnd) {
        setTimeout(() => {
            setI(i + 1);
        }, 500);
    }
    React.useMemo(() => {
        console.log(i);
    }, [i]);
    return (
        <div>
            <h1>I change the state</h1>
        </div>
    );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>

我不明白为什么if (i !== rnd)启动一个循环，因为条件应该只检查一次条件并继续使用代码。

我的思考过程是这样的：

  1. i为 0 且不等于 9，因此进入超时并等待 500 毫秒

  2. 运行增量并i变为 1

  3. console.log应该显示 1 正在打印

  4. 结尾

为什么它会变成一个循环并检查是否i等于rnd或不i等于不等于rnd？

标签： javascriptreactjs

解决方案

看起来您正在调用setI它将更新状态并反过来重新渲染组件和if条件？

推荐阅读