看起来很简单,但我做不到。
我已经实现了一个简单的计时器组件,它工作得很好。
这个想法是在我执行算法之前启动它,然后在它完成时停止它。所以我的组件基本上是这样的:
const App = () => {
const [isRunning, setIsRunning] = React.useState(false)
// run the chronometer on click and start executing the algorithm
const runAlgorithm = () => {
setIsRunning(true)
someAlgorithmThatWillTakeLong()
// top once its done
setIsRunning(false)
}
return (
<div>
<button onClick={() => runAlgorithm()}>Execute Algorithm and time it</button>
<Chronometer isRunning={isRunning}/>
</div>
)
}
然而,它被忽略了,我不知道如何让这两件事同时执行。我错过什么了吗?
下面是我的代码当前的工作示例:
const Chronometer = ({isRunning}) => {
const [milisseconds, setMilliseconds] = React.useState(0)
React.useEffect(() => {
let interval = null
if (isRunning) {
interval = setInterval(() => {
setMilliseconds((ms) => ms + 1)
}, 1)
} else {
clearInterval(interval)
}
return () => {
clearInterval(interval)
}
}, [isRunning])
return (
<div>
<h3>Solution time:</h3>
<h4>{milisseconds/100}</h4>
</div>
)
}
const someAlgorithmThatWillTakeLong = () => {
for (let i=0; i<999999; i++) {
// just run whatever
}
console.warn('done!')
return
}
const App = () => {
const [isRunning, setIsRunning] = React.useState(false)
const runAlgorithm = () => {
setIsRunning(true)
someAlgorithmThatWillTakeLong()
setIsRunning(false)
}
return (
<div>
<button onClick={() => runAlgorithm()}>Execute Algorithm and time it</button>
<button style={{ width: 150 }} onClick={() => setIsRunning(!isRunning)}>{isRunning ? 'Stop' : 'Test chronometer'}</button>
<Chronometer isRunning={isRunning}/>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
