React生命周期

Posted 2020-09-20

一、react组件的生命周期

1、生命周期指的是组件从初始化开始到结束的过程 或者是生命周期是描述ract组件从开始到结束的过程

2、每个react组件都具有生命周期

3、react都对组件通过生命周期给予的钩子函数进行管理

react组件经历总体阶段

1、mounted阶段 加载阶段 或者说初始化阶段 这个阶段组件由jsx转换成真实dom

2、update阶段 组件运行中阶段 当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段

3、umount阶段 组件卸载阶段 这个一般是组件被浏览器回收的阶段

--------------------------------------------------------------------------------------------

下面来说一下这三个阶段分别的钩子函数：

具体的生命周期函数------初始化阶段

react在每个不同阶段都定义了不同的钩子函数来检测组件当前的变化，或者说react组件发生改变的时候，react系统会通知一些立即去处理这些变化的函数：

1、设置默认属性 getDefaultProps

2、设置默认状态 getInitialState

3、组件即将加载时候允许的函数 componentWillMount

4、必不可少render

5、组件加载完毕的时候允许的函数componentDidMount

--------------------------------------------------------------------------------------------

具体的声明函数周期---运行中阶段

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新组件componentWillReceiveProps

2、组件是否更新 shouldComponentUpdate

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

--------------------------------------------------------------------------------------------

卸载组件 ReactDOM.unmountComponentAtNode(‘节点’)

--------------------------------------------------------------------------------------------

组件写法

var Demo=React.createClass({
    getDefaultProps:function(){
        console.log(‘默认属性‘)
        return{
        }
    },
    getInitialState:function(){
        console.log(‘默认状态‘)
        return{    
        }
    },
    componentWillMount:function(){
        console.log(‘组件即将加载‘)    
        console.log(‘一般使用ajax‘)    
    },
    render:function(){
        return(
            <div>1111</div>
        )
    },
    componentDidMount:function(){
        console.log(‘组件加载完成‘)
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))

初始化函数

var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:‘‘
        }
    },
    tap:function(e){
        var sty = e.target.value;
        this.setState({res:sty})
    },
    render:function(){
        return(
            <div>
                <h1>父组件</h1>
                <input type="text" onChange={this.tap}/>
                <Child name={this.state.res}/>
            </div>
        )
    }
})
var Child=React.createClass({
    componentWillReceiveProps:function(a){
        console.log(a)
    },
    shouldComponentUpdate:function(a){
        if(a.name==‘abc‘){
            return true;
        }else{
            return false;
        }
    },
    componentWillUpdate:function(){
        console.log(‘准备更新‘)
    },
    render:function(){
        return(
            <div>
                <h1>子组件</h1>
                <p>{this.props.name}</p>
            </div>
        )
    },
    componentDidUpdate:function(){
        console.log(‘完成‘)
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))

运行中函数

数据加载

mixins函数

1、作用是可以将一些公共的方法写在一个object的方法里面

2、然后通过mixins在组件中声明这个对象的表达式

3、在jsx中 就可以使用this去调用object里面的各个方法 这样实现了react多个组件之间共享一些公共的方法

var $=(function(){
        var ajax=function(url,callback){
            var xhr=new XMLHttpRequest();
            xhr.open(‘get‘,url,true)
            xhr.send(‘‘)
            xhr.onreadystatechange=function(){
                if(xhr.status==200&&xhr.readyState==4){
                    callback(JSON.parse(xhr.responseText))
                }
            }    
        }
        return{
            http:ajax
        }    
    })()    
//    $.http(‘test1.json‘,function(data){
//        console.log(data.title)
//    })
var Demo=React.createClass({
    getDefaultProps:function(){
        return{
            url:‘test1.json‘
        }
    },
    getInitialState:function(){
        return{
            res:‘‘,
            res1:‘‘
        }
    },
    componentWillMount:function(){
        var _this=this;
        $.http(this.props.url,function(data){
            _this.setState({res:data.title,res1:data.year})
        })
    },
    render:function(){
        var jsx=[];
        for (var i=0;i<this.state.res.length;i++) {
            jsx.push(<Child name={this.state.res[i]} name1={this.state.res1[i]}/>)
        }
        return(
            <div>
                {jsx}
            </div>
        )
    }
})
var sty={
    getA:function(){
        console.log(1)
    },
    getB:function(){
        console.log(2)
    }
}
var Child=React.createClass({
    mixins:[sty],
    render:function(){
        return(
            <div>
                <p onClick={this.getA}>{this.props.name}</p>
                <p>{this.props.name1}</p>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))

AJaX获取数据