リアクションの点滅速度が遅い

Question

私はリアクションでウインカーを作成しようとしていますが、点滅自体は一貫性のない速度で点滅/レンダリングし、ややイライラします。添付のスニペットをご覧ください。コンポーネントの取り付けに間違いがありますか？ありがとう！

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>

Answer 1

componentDidUpdateを削除します。コンポーネントを更新した後に新しい1秒のタイムアウトを引き起こすのはなぜですか？ didMountの間隔はまだ実行されています。

はまた、あなたは間隔をクリアする必要があるときに、あなたのコンポーネントアンマウント：

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

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