1. When the class component is passed to ReactDOM.render(), React calls the constructor of the class component to initialize some parameter variables
constructor(props) { super(props); this.state = {date: new Date()}; } 2. React then calls the render() method of the Clock component. This is when React understands what should be displayed on the screen, and then React updates the DOM to match the rendered output of Clock.
3. When the output of the class is inserted into the DOM, the function: componentDidMount() is called, and the interface is called inside to obtain the rendering data
componentDidMount(){ console.log('--------componentDidMount----- ------'); } 4. Use this.setState() function to change the value of the variable and dynamically change this.setState({ date: new Date() }); 5. Once the Clock component is removed from the DOM , React will call the hook function componentWillUnmount() to do some cleanup work componentWillUnmount() { clearInterval(this.timerID); }