React Lifecycle function (old)

Reference: Jane Book: Aermin

class MyComponent extends React.Component{
        // constructor
        constructor(props){
                console.log('constructor');
                super(props);
                this.state = {
                        name:'zhangsan'}}// The component will be mounted
        componentWillMount(){
                console.log('componentWillMount');
        }

        // The component is mounted
        componentDidMount(){
                console.log('componentDidMount');
        }

        // Returns false by default. Returns true to update component page content
        shouldComponentUpdate(){
                console.log('shouldComponentUpdate');
                return true;
        }

        // The component will be updated
        componentWillUpdate(){
                console.log('componentWillUpdate');
        }

        // The component is updated
        componentDidUpdate(){
                console.log('componentDidUpdate');
        }

        // The component will be unmounted
        componentWillUnmount(){
                console.log('componentWillUnmount');
        }
        
        // Custom functions
        changeName = () = > {
                this.setState({
                        name:'lisi'})}// Custom functions
        unmountComponent = () = > {
                // Manually unmount components
                ReactDOM.unmountComponentAtNode(document.getElementById('root'));
        }

        // Component rendering
        render(){
                console.log('render');
                return (
                        <div>
                                <button onClick={this.changeName}>Click to change the name: {this.state.name}</button>
                                <br/>
                                <br/>
                                <button onClick={this.unmountComponent}>Uninstall the component</button>
                        </div>
                )
        }
}

ReactDOM.render(<MyComponent age = {26} />.document.getElementById('root'));
Copy the code

There is also a life cycle function, as a novice, not very understand

componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
}
Copy the code

But the official documentation seems to suggest an alternative

getDerivedStateFromProps(){}
Copy the code

Life cycle functions are displayed in sequence before updating status is clicked

Click update status to display life cycle sequence

Life cycles are displayed in sequence after manually uninstalling components