javascript - 卸载组件后功能如何存在

Question

我的疑问与在 React 组件中使用计时器有关，根据我的理解，一旦组件卸载，之后所有属性/方法将不存在。

根据 DOC :

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in componentDidMount.

检查这个片段:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

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

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

  tick() {
     console.log('called', this.props.no);
  }

  render() {
    return (
      <div>
        <h1>Clock {this.props.no}</h1>
      </div>
    );
  }
}

class App extends React.Component {
  
  constructor(){
     super();
     this.state = {unMount: false}
  }
  
  click(){
     console.log('unmounted successfully');
     this.setState({unMount: !this.state.unMount})
  }
  
  render(){
    return (
       <div>
          <button onClick={() => this.click()}>Unmount first</button>
           {!this.state.unMount && <Clock no={1}/>}
           <Clock no={2}/>
       </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<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='root'/>

在这里，我正在渲染两个时钟组件并卸载成功发生的第一个按钮点击，它也在更新 DOM，即使在卸载第一个组件计时器之后，console.log( )。

我没有清除 componentWillUmount 中的计时器:

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

我的疑问是:

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

tick() {
   console.log('called', this.props.no);
}

我在计时器中传递一个类方法作为回调，所以一旦组件被卸载，tick 函数如何存在，这个计时器如何解析 this 关键字和 卸载组件后勾选函数？ this.props.no 如何获得正确的值？为什么它没有抛出错误:

can't read tick of undefined or tick is not defined

它是如何维护对这些函数的引用的？

帮我看看我在这里遗漏了什么，请提供任何引用或示例。

Answer 1

与 C++ 不同，您不能在 JavaScript 中显式地从内存中删除对象(也称为“销毁”)。您只能删除对它们的引用。一旦不再有指向该对象或其属性的引用，它就有资格进行垃圾回收。只有这样垃圾收集器才会真正销毁它。

Memory Management — JavaScript

在这种情况下，即使在卸载之后，您在闭包中仍然拥有对该对象及其属性的有效引用(this.tick、this.props 等)。在某些时候，在执行后，它们会超出范围，然后您的组件将被销毁并释放内存。