react的生命周期

react的生命周期

昨天说了(componentDidUpdate)函数，今天说下在实战中应用到的生命周期函数， 先看下官方给的图吧

生命周期函数函数(也就是钩子函数)，为了好区分我自己又编辑了一下，下载载的图片，图中画横线的是我们可以在这个周期做一些的相应操作的地方，有标号的地方就是我把事件发生分为三个阶段(说的不是很专业就是添加一点自己理解的点)

在react中它的核心思想就是声明式渲染和组件化开发，也就是在组件被声明渲染的时候发生了下面的这些操作

一.(我理解为页面的初始化就是页面的第一次渲染 这个阶段的函数都执行一次（render除外）)

getdifaultprops():

　　　　在这个组件声明开始渲染的时候react会获取这个组件的属性也就是在点用一个组件的时自己定义的一个属性和属性的值 

　　　　　　例：你有一个父组件parent和一个子组件son   你在父组件引用子组件并且给他传递了一个属性，fatherName ='xxx' 当子组件被渲染的时候第一步就是获取父组件传递过来的属性并保存在子组件的props中（可以通过this.props.xxx  获取到父组件传递过来的数据-----也就是组件通信之父传子的一种）

在这个钩子中react是不建议你在这里做任何操作的，如果你在组件中定义了这个函数的话react，

就会报错提示定义的这个函数在这个组件中只是一个普通的函数如何你想要使用这个钩子函数的话让你用 使用React.createClass创建的类（如果要使用的话只支持这种方法），虽然你定义的这个这个函数不是一个生命周期函式但是它还是一个普通函数还可以被调用(个人建议不要使用这种方式定义自己的方法)

getInitialState(): 

　　　　这个周期是初始化状态，这个周期也是不可被操作的。如果要操作就用使用React.createClass创建的类（如果要使用的话只支持这种方法） 

componentWillMount():

　　　　在这个周期中表示组件即将被渲染挂载,在这个时期可以操作函数，在这个期间我们可以改变状态，这个时候我们会想到请求数据对吧，要想到请求数据是异步操作，很有可能导致状态修改失败，所以就放在下一个函数中，这个函数中我们可以放一些同步修改状态的操作

render():

            渲染挂载页面

componentDidMount():

　　　　在这个周期中表示组件已经被渲染挂载，官方推荐这个这个函数进行异步的修改状态操作，然后由setState出发render()重新渲染页面

二.(重新渲染)

　　　　在这个阶段中就是通过this.props或者state的改变导致的页面重新渲染

props变化：

componentWillReserveProps(newProps)

　　　　这个时期是当父组件更新props之前触发的一个钩子，可以在这步更新组件状态，然后进入下一个周期

state变化：

　　state变化就是通过setstate()来触发的然后进入下一个周期

shouldComponentUpdata()

　　　　询问组件是否需要更新的一个钩子函数，默认的返回值是true，需要重新render()。若如果返回值是false则不触发渲染,利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能。

这个方法用来判断是否需要调用 render 方法重新描绘 dom。 因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

componentWillUpdata()

　　　　组件开始重新渲染之前调用

componentDidUpdata()

　　　　组件重新渲染并且把更改变更到真实的 DOM 以后调用。

二.(我理解为数据渲染) 

componentWillUnmount()

　　　　在组件被销毁之前的一个钩子执行任何必要的清理，例如使计时器无效、取消网络请求或清除在组件

 

 

import React ,{Component} from 'react'
class Life extends Component{
    state ={
        data:''
    }
    getDefaultProps(){
        console.log('获取父组件传递过来的数据')//不允许这使用这个函数会报错但是不应影响这个函数的使用
    }
    getInitialState(){
        console.log('自定义的函数')
    }
    change = ()=>{
        console.log('------改变了state--------')
        this.setState({data:123})
        this.props = {}
    }
    componentWillMount=()=>{
        if(this.state.data === '') 
            console.log('组件即将被第一次渲染')
    }
    componentDidMount =()=>{
        if(this.state.data === '') 
            console.log('组件已将被第一次渲染')
    }
    
    componentWillReceiveProps = (nextProps)=>{
        console.log("被改变的props的值"+nextProps)
    }
    shouldComponentUpdate(){
        console.log('默认重新render()的，返回值为false就不执行了')
　　　　　return true
    }
    componentWillUpdate(){
        console.log('组件即将被跟新')
    }
    componentDidUpdate(){
        console.log('组件已经被跟新')
    }
    componentWillUnmount(){
        console.log('组件即将被销毁')
    }
    render(){
        console.log('渲染组件成功！')
        return(
            <div>
                DATA:{this.state.data}
                <button onClick={this.change}>改变state</button>
            </div>
        )
    }
}
export default Life