React（脚手架）——create-react-app撸api

也快速过一下

    import React,{Component} from 'react'
    import axios from 'axios'

    class New extends Component {
        constructor(props) {
            console.log('01构造函数')
            super(props);
            this.state = {
                msg:''
            };    
        }
        componentWillMount(){
            console.log('02组件将要挂载')
        }
        componentDidMount(){
            //dom操作放在这里面  请求数据也建议放在这里
            console.log('04组件挂载完成')
        }
        render() {
            console.log("03数据渲染")
            return (
                <div>
                     <h2>{this.state.msg}</h2>
                    
                </div>
            );
        }
        
    }


    export default New;

由于构造器第一时间运行，所以可以在后面的生命周期中调用state

        componentWillMount(){
            this.setState({
                msg:'初始化数据'
            })
            console.log('02组件将要挂载')
        }

在将要挂载组件之前改变msg，页面就可以渲染了

当我们改变state重新渲染的时候也是存在生命周期的

        shouldComponentUpdate(){
            return true
        }

shouldComponentUpdate表示是否允许修改，默认为true

        shouldComponentUpdate(){
            console.log('01是否允许改变数据')
            return true
        }
        componentWillUpdate(){
            console.log('02即将改变数据')
        }
        componentDidUpdate(){
            console.log('04数据改变完成')
        }

03还是render

        //组件销毁的时候生命周期函数  用在组件销毁的时候
        componentWillUnmount(){
          console.log('组件已GG')
        }

这个如何触发呢，就是组件当前渲染之后不渲染了，我们在APP.js中方便使用

这里的话通过button改变布尔值用来显示组件，初始化是渲染的，点击button就会触发在组件中声明的销毁生命周期函数，要销毁哪个写到哪

还有一对用的不多的生命周期函数

shouldComponentUpdata与 componentWillReceiveProps 这个是父组件传值的周期函数

那么shouldComponentUpdata还有俩个参数

一个是打印更新后的props的数据一个是更新后的state数据