In this chapter we will discuss React component lifecycle. The component lifecycle can be divided into three states: * Mounting: already inserted into the real DOM * Updating: being re-rendered * Unmounting: removed from the real DOM !(#) * * * ## Mounting When the component instance is created and inserted into the DOM, its lifecycle call order is as follows: * `constructor()`: Before the React component is mounted, its constructor is called. * `getDerivedStateFromProps()`: Called before the render method is called, and is called during initial mount and subsequent updates. * `render()`: The render() method is the only required method in class components. * `componentDidMount()`: Called immediately after the component is mounted (inserted into the DOM tree). The render() method is the only required method in class components, other methods can be implemented as needed. For detailed description of these methods, refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference). * * * ## Updating Whenever the component's state or props change, the component will update. When the component's props or state change, it triggers an update. The component update lifecycle call order is as follows: * `getDerivedStateFromProps()`: Called before the render method is called, and is called during initial mount and subsequent updates. Based on the return value of shouldComponentUpdate(), determine whether the output of the React component is affected by the current state or props changes. * `shouldComponentUpdate()`: When props or state change, shouldComponentUpdate() will be called before rendering. * `render()`: The render() method is the only required method in class components. * `getSnapshotBeforeUpdate()`: Called before the most recent render output is committed to the DOM nodes. * `componentDidUpdate()`: Called immediately after updating occurs. The render() method is the only required method in class components, other methods can be implemented as needed. For detailed description of these methods, refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference). * * * ## Unmounting When the component is removed from the DOM, the following method is called: * `componentWillUnmount()`: Called immediately before the component is unmounted and destroyed. For detailed description of these methods, refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference). * * * ## Example The following is an example of the current time, updated every second: ## Example class Clock extends React.Component{constructor(props){super(props); this.state = {date: new Date()}; }componentDidMount(){this.timerID = setInterval(() =>this.tick(), 1000); }componentWillUnmount(){clearInterval(this.timerID); }tick(){this.setState({date: new Date()}); }render(){return(); }}const root = ReactDOM.createRoot(document.body); root.render(); [Try it »](#) The following example, after the Hello component is loaded, sets a timer through the componentDidMount method to reset the component's opacity every 100 milliseconds and re-render: ## React Example class Hello extends React.Component{constructor(props){super(props); this.state = {opacity: 1.0}; }componentDidMount(){this.timer = setInterval(function(){var opacity = this.state.opacity; opacity -= .05; if(opacity<0.1){opacity = 1.0; }this.setState({opacity: opacity}); }.bind(this), 100); }render(){return(); }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); [Try it »](#) The following example initializes **state**, **setNewnumber** is used to update **state**. All lifecycle methods are in the **Content** component. ## React Example class Button extends React.Component{constructor(props){super(props); this.state = {data: 0}; this.setNewNumber = this.setNewNumber.bind(this); }setNewNumber(){this.setState({data: this.state.data + 1}); }render(){return(); }}class Content extends React.Component{componentDidMount(){console.log("Component DID MOUNT!"); }shouldComponentUpdate(newProps, newState){return true; }componentDidUpdate(prevProps, prevState){console.log("Component DID UPDATE!"); }componentWillUnmount(){console.log("Component WILL UNMOUNT!"); }render(){return(); }}const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); [Try it »](#)