React 中的 Blinker 速度不一致答案

【问题标题】：Inconsistent Blinker speed in ReactReact 中的 Blinker 速度不一致
【发布时间】：2017-10-08 02:01:35
【问题描述】：

我正在尝试在 React 中创建一个闪烁器，但是，闪烁器本身以不一致的速率闪烁/渲染，并且有些令人沮丧。请参阅随附的 sn-p。组件安装有什么问题吗？谢谢！

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>

【问题讨论】：

标签： javascript reactjs ecmascript-6 blinker

【解决方案1】：

删除componentDidUpdate。为什么在组件更新后会触发新的一秒超时？从didMount 开始的时间间隔仍将运行。

此外，您需要清除组件卸载时的间隔：

componentDidMount() {
  this.blinkerId = setInterval(this.blinker, 1000)
}

componentWillUnmount() {
  clearInterval(this.blinkerId);
}

【讨论】：