我正在尝试在 React 中创建一个信号灯,但是,信号灯本身以不一致的速率闪烁/渲染,并且表现得有些令人沮丧。请参阅随附的片段。我在组件安装时做错了什么吗?谢谢!
class Blinker extends React.Component {
constructor(props) {
super();
this.state = {
appear: true
}
this.blinker = this.blinker.bind(this);
}
blinker() {
this.setState({appear: !this.state.appear });
}
componentDidMount() {
setInterval(this.blinker, 1000)
}
componentDidUpdate() {
setTimeout(this.blinker, 1000)
}
render() {
return (
<div>
{ (this.state.appear) && "xxx" }
</div>
);
}
}
ReactDOM.render(
<Blinker />,
app
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
最佳答案
删除componentDidUpdate
。为什么在组件更新后会触发新的一秒超时? didMount
的间隔仍将运行。
此外,您需要清除组件卸载时的间隔:
componentDidMount() {
this.blinkerId = setInterval(this.blinker, 1000)
}
componentWillUnmount() {
clearInterval(this.blinkerId);
}
关于javascript - React 中 Blinker 速度不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46626867/