react的生命周期函数和this.state

• constructor里的 this.state
  存放状态、数据
• react 生命周期函数
  从创建到销毁
• this.state的使用实例
  显示和隐藏

<script type="text/babel">
        class Demo extends React.Component{
            constructor(props){
                super(props);
                this.state={
                    show:false
                }
                this.getout = this.getout.bind(this);
                // 绑定this指向
            }

            getout(flag){
                // 使用this.set首字母大写属性修改里面的属性值 
                // 修改state里show的值
                this.setState({
                    show:flag
                })
            }

            render() {
                // 箭头函数的好处是，点击调用之后this的指向还是之前的指向
                let show = this.state;
                return(
                    <div>
                        <button onClick={()=>{this.getout(true)}}>显示</button>
                        <button onClick={()=>{this.getout(false)}}>隐藏</button>
                        <hr/>
                        {this.state.show&&
                            <p>
                                还记得那天一双旧皮鞋，拉着我走过那一横一竖的街    
                            </p>
                        }
                    </div>
                )   
            }
        }

        ReactDOM.render(
            <Demo />,
            document.querySelector('#app')
        )

    </script>

• 生命周期函数

<script type="text/babel">
    /**
     * react的生命周期分为三种
     * 1.mount 挂载
     * 2.update 更新
     * 3.unmount 卸载
    */
        class Demo extends React.Component{
            constructor(props){
                super(props);
            }
            componentWillMount(){
                console.log('即将挂载')
            }
            componentDidMount(){
                console.log('已挂载')
            }
            componentWillUpdate(nextProps,nextState){
                console.log('将要更新')
            }
            componentDidUpdate(prevProps,prevState){
                console.log('更新完毕');
            }
            // 默认每一次的修改都触发页面更新，此函数用于干预是否要更新，孕育性能优化
            shouldComponentUpdate(nextProps,nextState){

            }
            componentWillUnmount(){
                console.log('将要卸载')
            }
            render() {
                return(
                    <div>生命周期</div>
                )   
            }
        }

        ReactDOM.render(
            <Demo />,
            document.querySelector('#app')
        )

    </script>