本机反应 - 为计时器应用程序优化 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