反応コンポーネントでsetIntervalを使用する

Question

私は公式の反応Webサイトでチュートリアルを読んでいました。ライフサイクルメソッドの例では、componentDidMountメソッドの下で、timerIDがsetInterval関数に設定されています。

私の質問は、timerIDが初期化されたにもかかわらず、アプリケーション全体では決して呼び出されませんでした。以下にコードを示します。

class Clock extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {date: new Date()}; 
    } 

    componentDidMount() { 
    this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 
    } 

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

    tick() { 
    this.setState({ 
     date: new Date() 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Clock />, 
    document.getElementById('root') 

); 

Answer 1

this.timerIDはsetInterval()へのコールによって作成されたタイマーを識別する数値、ゼロ以外の値です。タイマーをクリアするには、この値をclearIntervalに渡すことができます。

componentDidMount() { 
    this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 
    } 

ようcomponentDidMountでのsetIntervalを呼び出すときですから、部品が実装しているtick()機能every 1 sec a FTERを実行したいです。今度は別のコンポーネントに移動し、現在のコンポーネントがアンマウントされたときにの呼び出しをクリアしないと、tick()関数は引き続き実行されます。したがって、あなたが反応ドキュメントで提供されるので、this.timerID

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

完全なコードに格納されてsetIntervalによって返された数値で識別されたクリアされているタイマcomponentWillUnmount機能で

は

class Clock extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {date: new Date()}; 
    } 

    componentDidMount() { 
    this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 
    } 

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

    tick() { 
    this.setState({ 
     date: new Date() 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <Clock />, 
    document.getElementById('root') 
); 

です

Answer 2

シンプルです。 Reactが実行すると、componentDidMount（）ライフサイクルメソッドが実行されると、タイマーが実行を開始します。

this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 

上記のタイマーは、（コードに従って）コンポーネントがアンマウントされるまで実行されます。あなたのコードがそのように機能するのは驚くべきことではありません。