React的生命周期函数初始挂载更新移除详解

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化数据...");
        super(props);
        this.state = {};
    }
    render(){
        return (
            <div>Hello World</div>
        );
    }
}
export default Demo

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化数据...");
        super(props);
        this.state = {};
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <div>Hello World</div>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
}
export default Demo

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化数据...");
        super(props);
        this.handleClickTest = this.handleClickTest.bind(this);
        this.state = {
            number:1
        };
    }
    handleClickTest(){
        const number = this.state.number + 1;
        this.setState({
            number
        });
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <div onClick={this.handleClickTest}>Hello World</div>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
    //更新前执行
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
}
export default Demo

import React,{Component,Fragment} from 'react';
import Demo2 from './Demo2';
class Demo extends Component{
    constructor(props){
        console.log("初始化数据...");
        super(props);
        this.handleClickTest = this.handleClickTest.bind(this);
        this.state = {
            number:1
        };
    }
    handleClickTest(){
        const number = this.state.number + 1;
        this.setState({
            number
        });
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <Fragment>
                <div onClick={this.handleClickTest}>Hello World</div>
                <Demo2 number={this.state.number}/>
            </Fragment>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
    //更新前执行
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
    //组件从页面中移除前自动执行
    componentWillUnmount(){
    }
}
export default Demo

import React,{Component} from 'react';
class Demo2 extends Component{
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
    }
    render(){
        const {number} = this.props;
        return (<div>{number}</div>);
    }
}
export default Demo2;

import React from 'react';
import ReactDom from 'react-dom';
import TodoList from './TodoList';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import ButtonTest from './ButtonTest';
import NewButton from './NewButton';
import Demo from './Demo';
class Entry extends React.Component{
    render(){
        return (
            <BrowserRouter>
                <Routes>
                    {/*{<Route path='/todoList' element={<TodoList/>}/>}*/}
                    {<Route path='/buttonTest' element={<ButtonTest/>}/>}
                    {<Route path='/newButton' element={<NewButton/>}/>}
                    <Route path='/Demo' element={<Demo/>}/>
                </Routes>
            </BrowserRouter>
        )
    }
}
ReactDom.render(<Entry/>,document.getElementById('root'));

import React,{Component} from 'react';
import { Button } from 'antd';
import {Link} from 'react-router-dom';
class NewButton extends Component{
    render(){
        return (
            <Link to='/buttonTest'>
                <Button type="primary">Primary</Button>
            </Link>
        );
    }
    //组件从页面中移除前自动执行
    componentWillUnmount(){
        console.log('componentWillUnmount-----------');
    }
}
export default NewButton;

import React,{Component} from 'react';
import { List, Avatar } from 'antd';
const data = [
    {
        title: 'Ant Design Title 1',
    },
    {
        title: 'Ant Design Title 2',
    },
    {
        title: 'Ant Design Title 3',
    },
    {
        title: 'Ant Design Title 4',
    },
];
class ButtonTest extends Component{
    render(){
        return (
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                            title={<a href="https://ant.design" rel="external nofollow" >{item.title}</a>}
                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                        />
                    </List.Item>
                )}
            />
        );
    }
}
export default ButtonTest;