React-组件的生命周期

1.组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()---render之前最后一次修改状态的机会
componentDidMount()---成功render并渲染完成真实DOM之后触发，可以修改DOM
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

注意：render只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

2.React中的Ajax使用

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>测试获取数据</title>
	<script src="./build/react.js"></script>
	<script src="./build/react-dom.js"></script>
	<script src="./build/browser.min.js"></script>
	<script src="./build/jquery.min.js"></script>
	
</head>
<body>
	<div id="container"></div>
</body>
	<script type="text/babel" >
		$(document).ready(function(){
	var UserGist=React.createClass({
		getInitialState:function(){
			return {
				username:'',
				lastGistUrl: ''
			};
		},

		componentDidMount:function(){
			$.get(this.props.source,function(result){
				var lastGist=result[0];
				if(this.isMounted()){
					this.setState({
						username:lastGist.owner.login,
						lastGistUrl:lastGist.html_url
					});
				}
			}.bind(this));
		},

		render:function(){
			return (
				<div>
					{this.state.username}'s last gist is 
					<a href={this.state.lastGistUrl}>here</a>.
				</div>
				);
		}
	});

	ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists"/>,document.getElementById('container'));

});

	</script>
</html>

要获取的数据是：https://api.github.com/users/octocat/gists里面的JSON数据

效果：

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

使用get()方法以GET方式从服务器获取数据

　　使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：

　　$.get(url,[callback])

　　参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

使用bind()方法绑定元素的事件

　　bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：

　　$(selector).bind(event,[data] function)

　　绑定元素的多个事件时,只需将事件用空格符隔开

　　$("#test").bind("change click",function(){});

　　参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

总结：　

　　（1）ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

　　（2）可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件；要对某些值的变化做DOM操作的，要把这些值放到state中。

　　（3）为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

　　（4）组件名称首字母必须大写。

　　（5）变量名用{}包裹，且不能加双引号。

参考文档：

http://www.ruanyifeng.com/blog/2015/03/react.html

http://www.cocoachina.com/webapp/20150721/12692.html

来源：https://www.cnblogs.com/GumpYan/p/5809424.html

标签

react

react生命周期

object