setInterval+React挂钩导致组件内的多个更新

Question

我正在构建一个以秒为单位显示时间的秒表UI。单击按钮，计时器将开始向上计数，并在再次单击时停止。用户应该能够重新启动它。

我遇到的问题是，我可以让setInterval正常工作，但一旦我包含setTime钩子，组件就会更新以在UI中呈现时间，但setInterval实例会被多次调用。这会导致奇怪的渲染行为。

const Timer = () => {
const [time, setTime] = useState(0)
let timer
const startStopTimer = () => {
if (!timer) timer = setInterval(() => setTime(time++), 1000)
else {
clearInterval(timer)
timer = null
}
}
return (
<div>
<p>Time: {time} seconds</p>
<Button 
onClick={() => {
startStopTimer()
}
> Start/Stop </Button>
</div>
)
}

示例行为为：

1. 用户单击"开始/停止">
2. 计时器从0开始向上计数
3. 用户单击"开始/停止">
4. 计时器立即停止
5. 用户单击"开始/停止">
6. 计时器在停止的地方继续

Answer 1

这是React钩子中过时闭包的一个经典示例，在调用setTime后，time的setInterval值不会更改。更改您的代码：

setInterval(() => setTime(currentTime => currentTime + 1), 1000)。

setTime和类组件的setState一样，也接受一个回调函数，该函数将当前值作为第一个参数

此外，timer变量在您的代码中是无用的，因为在每次重新渲染时，它都是未定义的，并且您无法访问setInterval的返回值，因此它将重新初始化setInterval。为了处理使用useRef的情况，您可以将setInterval的返回存储在.current中，在随后的重新渲染后，它将对您可用，因此不再重新初始化setInterval，您也可以使用clearInterval

解决方案：

const {useState, useRef} = React;
const {render} = ReactDOM;
const Timer = () => {
const [time, setTime] = useState(0);
const timer = useRef(null);
const startStopTimer = () => {
if (!timer.current) {
timer.current = setInterval(() => setTime(currentTime => currentTime + 1), 1000);
} else {
clearInterval(timer.current);
timer.current = null;
}
};
return (
<div>
<p>Time: {time} seconds</p>
<button
onClick={startStopTimer}
>
Start/Stop
</button>
</div>
);
};
render(<Timer />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

下面是一个使用react类组件的示例。此示例跟踪开始时间，而不是在某个时间间隔添加某个值。然后，当你停止计时器时，它会累积经过的时间。

传递给setInterval的回调可能并不总是精确地在每个n毫秒调用。如果JavaScript引擎繁忙，可能需要更长的几毫秒时间。计数器运行的时间越长，保留计数器将慢慢抵消实际经过的时间。

const {Component} = React;
const {render} = ReactDOM;
class StopWatch extends Component {
state = {startTime: null, accTime: 0, intervalId: null};

componentWillUnmount() {
clearInterval(this.state.intervalId);
}

ms() {
const {startTime, accTime} = this.state;
if (!startTime) return accTime;
return Date.now() - startTime + accTime;
}

start = () => {
this.setState({
startTime: Date.now(),
intervalId: setInterval(() => this.forceUpdate(), 10)
});
}

stop = () => {
clearInterval(this.state.intervalId);
this.setState({
startTime: null,
accTime: this.ms(),
intervalId: null
});
}

reset = () => {
this.setState({
accTime: 0,
startTime: this.state.startTime && Date.now()
});
}
render() {
return (
<div>
<h1>{this.ms() / 1000}</h1>
{this.state.startTime
? <button onClick={this.stop}>stop</button>
: <button onClick={this.start}>start</button>}
<button onClick={this.reset}>reset</button>
</div>
);
}
}
render(<StopWatch />, document.getElementById("stop-watch"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="stop-watch"></div>