react生命周期分享,无论你是否看过!!!

一、基础

先来介绍一个生命周期的定义:
1)componentWillMount(){}

// Mounting  安装阶段 
// 在客户端和服务器上,在初始渲染发生之前立即调用一次 如果在这个方法中调用setState,
// render()将看到更新的状态,并且只会执行一次,尽管状态改变。

2)componentDidMount(){}

// Mounting  安装阶段 
// 调用一次,只在客户端(不在服务器上),在初始渲染发生后立即
// 子组件的componentDidMount()方法在父组件的componentDidMount()方法之前被调用
// setTimeout  setInterval   AJAX 在此之行,强烈建议

3)componentWillReceiveProps(nextProps){}

// Updating 更新阶段
// 在组件接收新props时调用。初始渲染不调用此方法。
// 老的props可以用this.props  新值就用nextProps查看
// 在此函数中调用this.setState()不会触发附加的渲染。

4)shouldComponentUpdate(nextProps, nextState){}

// Updating 更新阶段
// 当正在接收新的道具或状态时,在渲染之前调用。
// 此方法必须返回false or true 否则报错  true则渲染,false则不渲染!在此声明周期中可以考虑是否需要进行渲染!避免不必要的性能浪费
// 如果shouldComponentUpdate返回false,那么render()将被完全跳过,直到下一个状态改变。此外,不会调用componentWillUpdate和componentDidUpdate。
// 默认返回true
// 如果性能是一个瓶颈,特别是有几十个或几百个组件,请使用shouldComponentUpdate来加快您的应用程序。
// return true or false

5) componentWillUpdate(nextProps, nextState){}

// Updating 更新阶段
// 当正在接收新的props或state时立即调用。初始渲染不调用此方法
// 您不能在此方法中使用this.setState()。如果您需要更新state以响应prop更改,请改用componentWillReceiveProps。

6)componentDidUpdate(nextProps, nextState){}

// Updating  更新阶段
// 在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。
// 当组件已更新时,使用此操作作为DOM操作的机会

7)componentWillUnmount(){}

// Unmounting  卸载阶段
// 在组件从DOM卸载之前立即调用。
// 在此方法中执行任何必要的清理,例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy 

二、生命周期的执行顺序

举例:只有一个组件,里面有一个onClick事件改编一个state

刷新页面:

a、componentWillMount--->    // 可以更改state
            render()---->
                componentDidMount // 周期结束
                

触发onClick事件:(前提只有事件中出发setState,其他中没有)

shouldComponentUpdate中 return true
    shouldComponentUpdate-->
            componentWillUpdate-->
                    render()-->
                            componentDidUpdate //周期结束
    
shouldComponentUpdate中 return false
            shouldComponentUpdate //周期结束

上面只是一个很简单的例子讲述了周期的执行顺序,大家可以根据顺序去做相应的操作,当然在componentWillUpdatecomponentDidUpdate这两个周期中不可以使用this.setState,需要使用此方法可以在componentWillReceiveProps中去操作。周期中可能进行的操作在上面的定义中以解释。

举例:父、子组件,父组件和上述相同,字段件只是一个纯ui组件没有任何的操作,接受父组件传来的props(父组件的click可控制props的内容)。

刷新页面:

父componentWillMount--->父render()---->子componentWillMount--->子render()--->子componentDidMount--->父componentDidMount

触发onClick事件:

子组件shouldComponentUpdate 返回的是false
    父shouldComponentUpdate-->父componentWillUpdate-->父render()-->父componentDidUpdate
子组件shouldComponentUpdate 返回的是true
    父shouldComponentUpdate-->父componentWillUpdate-->父render()--->子componentWillReceiveProps--->子shouldComponentUpdate--->子componentWillUpdate---->子render()--->子componentDidUpdate--->父componentDidUpdate

componentWillUnmount阶段
当你的组件关闭的时候,例如跳转页面的时候,此周期执行一次。可能做的操作在上面的定义。

给出一段代码:(就是上述的子组件)

import React, { Component } from 'react';

class Another extends Component {
    constructor(props) {
        super(props);
        this.state = {
            son:'子组件'
        }
    }
    componentWillMount() {
    console.log('子组件--Mounting-componentWillMount',this.state.son)
  }
  componentDidMount() {
    console.log('子组件--Mounting-componentDidMount',this.state.son)
  }
  componentWillReceiveProps(nextProps) {
    console.log('子组件--Updating-componentWillReceiveProps')
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('子组件--Updating-shouldComponentUpdate')
    return true
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('子组件--Updating-componentWillUpdate')
  }
  componentDidUpdate(nextProps, nextState) {
    console.log('子组件--Updating-componentDidUpdate')
  }
  componentWillUnmount() {
  }
    render() {
        return(
            <div>
                我是子组件--我是子组件--我是子组件{this.props.name}
            </div>
        )
    }
}


export default Another;

根据上面的代码,说一个组件实例的初始化的方法过程

1)`getInitialState` 设置初始状态值,(掉调用一次),可使用setState方法更改状态

es6语法则在这是用:

    constructor(props) {
        super(props);
        this.displayName='name';
        this.事件名=this.事件名.bind(this);//绑定事件的this,这样初始化只绑定一次,如果在render中邦定,则只要render就邦定一次。
        this.state = {
            son:'子组件'
        }
    }
    static propTypes = { 
        value:PropTypes.string,
        //类型的种类object string array func number bool any
    }
    static defaultProps={ 
        value:'1'
    }
2)`getDefaultProps `设置初始props的值,不可以更改
es6语法参照上面的 static defaultProps

3)`propTypes `验证传递给组件的props
es6语法上述 static propTypes   

4)`displayName `用于degbug调试消息,如果不写,JSX将从变量赋值中推断出类的displayName,es6语法如上述代码片段中,例如下面
// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });
执行的顺序就是上述代码片段的顺序!

三、总结

详细了解生命周期的特性,有助于处理数据,更好的节约性能。本人一点点小的见解,还望各位路过的大神,赏脸批评指正!
阅读 3.4k

推荐阅读
学以致用
用户专栏

从事前段的一些心得、体会分享出来,同时也让自己谨记!记住那些踩过的坑...

4 人关注
6 篇文章
专栏主页