Componentwillunmount uninstall components

problem ：index.js:1 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
( Warning ： Cannot execute on an unloaded component React Status update . This is an empty operation , But it indicates a memory leak in your application . To solve this problem , Please be there. componentWillUnmount Method to cancel all subscriptions and asynchronous tasks .)

Problem description ： This is after the component is uninstalled , Proceed again React Of state Status update for , This is obviously right React Is an empty operation for the component , There are no more components available to update the state and render , So the above error will be reported .
Similar to this problem is , stay React Before the stateful component of is loaded , Change the state of components in advance setState, This will make it impossible to determine whether there is a page rendering behind . Make data changes before the component is loaded , But now, componentWillMount() This lifecycle function has been removed .

To take one React The small example , Explain ：

class Clock extends React.Component {
    
  constructor() {
    
    super()
    this.state = {
    
      now: 0
    }
  }
//  Clear the timer before unloading the component , Otherwise, it will be updated after the component is uninstalled state, Cause memory leaks 
  componentWillUnmount() {
    
    clearInterval(this.timeId)
  }
  
  componentDidMount() {
    
    // var that = this
    var func = function() {
    
      var now = new Date().toLocaleTimeString()
      this.setState({
    
        now 
      })
    }.bind(this)
    func()
    // Every interval 1s Do it once func() Method 
    this.timeId = setInterval(func, 1000)
  }
  render() {
    
    return (
        <div className="container">
          {
    this.state.now}
        </div>
    )
  }
}

Display the current time in real time on the page ,componentDidMount() Timer in , Change every second state state , Component aware state changes , Then re render the components . At the current moment of component unloading , perform componentWillMount() The content in , Clear timer timeId. inform React The component is about to be uninstalled , Do not update the status after uninstallation .
React Official website componentWillUnmount