本机反应 - 为计时器应用程序优化 ReactJS 代码

Question

我目前正在将我的 ReactJS 代码移动到 React Native，我想知道我是否需要以任何方式更新它。它正在工作，但我相信某个地方可能存在内存泄漏（我在运行应用程序时收到警告）。我所指的部分是：class Stopwatch extends Component {  constructor() {    super();    this.state = {      timerOn: false,      timerStart: 0,      timerTime: 0    };  }  startTimer = () => {        this.setState({          timerOn: true,          timerTime: this.state.timerTime,          timerStart: Date.now() - this.state.timerTime,        });        this.timer = setInterval(() => {          this.setState({            timerTime: Date.now() - this.state.timerStart          });        }, 10);      };        stopTimer = () => {        this.setState({           timerOn: false,        });        clearInterval(this.timer);      };    render() {        return (              <View>                  {this.state.timerOn === false && this.state.timerTime === 0 && (                    <TouchableOpacity style={styles.button} onPress={this.startTimer}>                      <Text>start</Text>                    </TouchableOpacity>                   )}                  {this.state.timerOn === true && (                    <TouchableOpacity style={styles.button} onPress={this.stopTimer}>                      <Text>stop</Text>                    </TouchableOpacity>                  )}              </View>}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

如果组件在计时器运行时卸载，则会发现内存泄漏。这是因为集合间隔永远不会被清除;间隔回调仍将触发，并且由于它调用 setState，因此即使组件不再挂载，它也会尝试更新组件（导致错误消息）

要解决此问题，您只需要使用组件“将卸载”生命周期方法清除 setInterval。

https://reactjs.org/docs/state-and-lifecycle.html