浅谈慕课网React入门课程笔记（三）

本文介绍React Components从创建到消失的生命周期状态和属性在生命周期是如何流转的。

 

1、React Components在浏览器中存在的生命周期中的三个状态

1) Mounting：一个React Components被rander解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。当能在浏览器上看到从无到有的时候，mounting已经结束了。mounting结束，就说React Components被mounted了。

2) Updating：一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的DOM结构就一定会发生改变，React会React Components的当前state和最近一次的state进行对比，只有当state确实发生了改变，并且影响到DOM结构时，React才会去改变对应的DOM结构。

3) Unmounting：一个mounted的React Components对应的DOM节点被从DOM结构中移除的过程。

 

2、每一个状态React都封装了对应的多个库函数：will表示将要怎么怎么样，did表示已经怎么怎么样。

1) Mounting：在Mounting状态封装了四个库函数——componentWillMount()和componentDidMount()、getInitialState()、getDefaultProps()。

①　componentWillMount()：在mounting前被调用；

②　componentDidMount()：在mounting后被调用；

③　getInitialState()：初始化Components state；

④　getDefaultProps()：设置默认的props。

2) Updating：在Updating状态封装了四个库函数——componentWillUpdate()和componentDidUpdate()、componentWillReceiveProps()、shouldComponentUpdate()。

①　componentWillUpdate()：在updating前被调用；

②　componentDidUpdate()：在updating后被调用；

③　componentWillReceiveProps()：当一个mounted的React Components将要接收新的props时调用，其函数参数就是新的props对象，可以在函数体内比较该函数参数和this.props，从而进行例如修改state的操作；

④　shouldComponentUpdate()：在一个mounted的React Components已经接收到新的props和state之后判断是否有必要去更新DOM结构，其函数参数有两个，第一个参数是新的props对象，第二个参数是新的state对象，可以分别对比其跟this.props和this.state来决定是否有必要去更新DOM结构，该函数返回true表示更新，返回false表示跳过这次更新，不更新DOM结构。

一般很少重写上面四个函数。

3) Unmounting：在Unmounting状态只封装了一个库函数——componentWillUnmount()。

componentWillUnmount()：当要把一个React Components销毁掉时，一般在这个函数中执行cleanup的操作，如释放内存资源、图片资源等，但一般用的非常少，这得益于浏览器内存的垃圾回收机制。

var Hello = React.createClass({  
	getInitialState: function() {
		alert('getInitialState');
		return {
			fontSize: "15px"
		};
	},
    render: function() {  
        return (  
            <div style={{fontSize: this.state.fontSize}}>Hello React!</div>  
        );  
    },
	componentWillMount: function() {  
		alert('componentWillMount');
	},
	componentDidMount: function() {  
		alert('componentDidMount');
		var that = this;
		setTimeout(function() {
			that.setState({
				fontSize: "30px"
			})
		}, 1000);
	}
});  
setInterval(function() {  
    ReactDOM.render(  
       	<Hello />,  
        document.getElementById('content')  
    );  
}, 1000);

3、props和state的对比

Props往往是通过组件调用方在调用时指定，我们认为props一旦指定了，一般情况下是不会变的，尤其是对于被调用组件来说，props的拥有者是其调用方，或者说在结构上是其parent，而state是私属于当前组件的，state值是可变的，认清楚这点，才不至于混用props和state。修改state的值，可以调用Component的setState()方法即可。state值的每次改变都会导致Components从当前状态进入update状态，从而重新render。