Wo ist der beste Ort, um setInterval() in React Komponente

Question

zu halten Ich habe ein React-Karussell erstellt, in dem ich SetInterval-Methode in ComponentDidMount-Methode wie folgt aufrufen, scheint aber wie React wirft Warnung wie unten angehängt. Tue ich es falsch? idealerweise componentDidMount sollte nur einmal aufgerufen werden und mein Code sollte gut funktionieren.

componentDidMount() { 
    const self = this; 

    if(self.props.autoPlay) { 
     setInterval(() => { 
     if(self.state.current != self.props.images.length - 1){ 
      self.handleTransition(self.state.current + 1); 
     } else { 
      self.handleTransition(0); 
     } 
     }, 3000); 
    } 
    } 

Answer 1

das Intervall als eine Eigenschaft der Komponente, löschen dann das Intervall, nachdem die Komponente Aushänge:

componentDidMount() { 
    const self = this; 

    if(self.props.autoPlay) { 
    self.interval = setInterval(() => { 
     if(self.state.current != self.props.images.length - 1){ 
     self.handleTransition(self.state.current + 1); 
     } else { 
     self.handleTransition(0); 
     } 
    }, 3000); 
    } 
} 

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

Answer 2

I auch eine Variable innerhalb eines Moduls verwendet wurde, in dem die Komponente ist definiert. Etwas wie:

//Clock.js 

let timerID; 

class Clock extends React.Component { 

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

    componentWillUnmount() { 
    clearInterval(timerID); 
    } 

    tick() { 
    console.log('tick'); 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     </div> 
    ); 
    } 
} 

Vielleicht hat jemand kommentieren, warum ist this.timerID (wie in Using setInterval in React Component erwähnt) bevorzugt?