react生命周期函数测试

写react也有一段时间了，但是因为习惯了es6的写法，项目中都是使用class来建立，因此对react本身的周期函数有些忽略，在此补上。
        react的生命周期如下图所示：
                  ![输入图片说明](http://git.oschina.net/uploads/images/2017/0309/135254_6ed89001_60495.png "在这里输入图片标题")
        初始化状态时所调用的周期函数：
            
                getDefaultProps()
                getInitalState()
                componentWillMount()
                render()
                componentDidMount()

上述函数除了render(),其他都只是在react组件初始化的时候执行一次,后期的rerender，不会执行它们,getDefaultProps是获取由父组件传入的props,getInitalState是获取一开始的state，state里面的值，可以自己设置，也可以由父组件传入props进行赋值，因为项目中一直写的都是class这样的es6的写法，所以getDefaultProps就基本没怎么用到过，而getInitalState则可以由 this.state = {} 来替代；
        componentWillMount()函数是在VDOM在render成真是DOM前最后的操作，此时依然是VDOM，在这里可以操作state，例如：
```
        componentWillMount(){
    	    this.setState({test:false});
        }
```
        在这里可以修改state，但是并不会造成render，当操作完成之后，进入render渲染，当VDOM被渲染成真实DOM时，进入componentDidMount()，因为此时真实的DOM已经生成，所以可以可以在此函数中调用jquery等第三方插件，或者ajax请求数据，但是如果在这重新setState的话，会造成react的rerender，例如：
```
        componentDidMount(prevProps,prevState){
		    this.setState({test:true});
	}
```
        会造成rerender,如图所示：
                ![输入图片说明](http://git.oschina.net/uploads/images/2017/0309/135527_9d5f2e60_60495.png "在这里输入图片标题")

梅气灶/React-webpack

内容风险标识

评论 (0)

梅气灶/React-webpack .gitee-modal { width: 500px !important; }

内容风险标识