In this chapter, we will discuss the lifecycle of React components.\n\nThe lifecycle of a component can be divided into three states:\n\n* Mounting: Inserted into the real DOM\n* Updating: Being re-rendered\n* Unmounting: Removed from the real DOM\n\n!(#)\n\n* * *\n\n## Mounting\n\nWhen a component instance is created and inserted into the DOM, its lifecycle invocation order is as follows:\n\n* `constructor()`: The constructor is called before the React component is mounted.\n* `getDerivedStateFromProps()`: Called before the render method is invoked, and is called on both initial mount and subsequent updates.\n* `render()`: The render() method is the only required method in a class component.\n* `componentDidMount()`: Called immediately after the component is mounted (inserted into the DOM tree).\n\nThe render() method is the only required method in a class component; other methods can be implemented as needed.\n\nFor detailed descriptions of these methods, you can refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference).\n\n* * *\n\n## Updating\n\nA component updates whenever its state or props change.\n\nAn update is triggered when the component's props or state change. The lifecycle invocation order for component updates is as follows:\n\n* `getDerivedStateFromProps()`: Called before the render method is invoked, and is called on both initial mount and subsequent updates. Based on the return value of shouldComponentUpdate(), it determines whether the React component's output is affected by the current state or props changes.\n* `shouldComponentUpdate()`: When props or state change, shouldComponentUpdate() is called before rendering is executed.\n* `render()`: The render() method is the only required method in a class component.\n* `getSnapshotBeforeUpdate()`: Called before the most recent render output is committed to the DOM node.\n* `componentDidUpdate()`: Called immediately after an update occurs.\n\nThe render() method is the only required method in a class component; other methods can be implemented as needed.\n\nFor detailed descriptions of these methods, you can refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference).\n\n* * *\n\n## Unmounting\n\nThe following method is called when a component is removed from the DOM:\n\n* `componentWillUnmount()`: Called directly before a component is unmounted and destroyed.\n\nFor detailed descriptions of these methods, you can refer to the (https://zh-hans.reactjs.org/docs/react-component.html#reference).\n\n* * *\n\n## Examples\n\nThe following is an example of the current time, which updates every second:\n\n## Example\n\nclass 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();\n\n[Try it out »](#)\n\nThe following example uses the componentDidMount method to set a timer after the Hello component is loaded, resetting the component's opacity every 100 milliseconds and re-rendering:\n\n## React Example\n\nclass 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();\n\n[Try it out »](#)\n\nThe following example initializes **state**, and **setNewnumber** is used to update **state**. All lifecycle methods are in the **Content** component.\n\n## React Example\n\nclass 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();\n\n[Try it out »](#)