react学习(一)

React组件的生命周期:

1. mounting安装过程:
getDefaultProps()获取默认的Props,
getInitialState()获取初始化的state,
componentWillMount组件即将安装,
render()安装
componentDidMount()组件安装完场;
2. updating数据更新过程
componentWillReceiveProps()组件即将接受属性值,并更新到组件上
shouldComponentUpdate() 判断是否需要更新数据(老的props和新的props是否相同,老的state和新的state是否相同;)
componentWillUpdate() 组件即将更新变量的数据;
render 更新;
componentDidUpdate;组件完成变量的数据更新
3. Unmounting销毁
componentWillUnmount()组件即将销毁,在这里释放内存资源,一般很少用,毕竟有垃圾回收机制

当调用了this.setState({}),会自动执行过程2,来判断是否需要更新,判断与原来的state相同,不更新,相同更新;

一个例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>

    <script src="./../../build/react.js"></script>
    <script src="./../../build/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <body>
    	<div id="container"></div>
    	<script type="text/babel">

/*
React.createClass({})创建一个组件的类；
1. redner函数里面的return的标签是JSX语法糖；
2. {this.props.name}： {}里面是js表达式，this是实力组件，props属性集合，name组件的name属性；
3. 要在jsx标签上添加css的类名，因为这是js的运行环境。而class是js的保留字，所以用的是className。

react的生命周期
1. mounted 创建的过程，React Components被render解析，生成对应的dom节点。并被插入浏览器的dom结构中的一个过程；
2. updated 更新的过程
3. unmounted 销毁的过程；
*/
/*
props和state的异同
相同点：
这两个都可以提供组件的某些值，比如，css样式值，内容，类名，
调用方式类似，在jsx语法糖中style={{opacity:this.props.height}}, style = {{opacity: this.state.height}};
简单来说都是用来存储变量数据的
不同点：
1. 一般来说state是组件编写的人提供的，props是组件的使用方提供的
2. 一般state是可变的，而props是使用组件的人在使用某个组件实例的时候提供的数据，一般是不变的。作为当前组件实例的基本属性

state的改变
在React.createClass，react组件的类中this指的就是组件实例。可以用this.setState({})来修改 state;
每当state发生改变后，就会进入updating（组件更新）的流程；
*/

/*
事件绑定
1. 在React.createClass({})的参数中添加一个handle事件函数；
2. 在render函数中直接在标签（这里其实并不是真是的标签）上写： onClick=this.handle(),事件函数用驼峰命名；
3. 操作元素：
1. 给子组件一个ref="tip"的属性；
2. 在事件函数中用this.refs.tip索引到这个组件，注意这里索引的是组件，不是dom 节点。这里的ref就和id类似；
3. 用React.findDomNode(this.refs.tip)就可以拿到这个dom节点；



    		/*
    		1. React: React操作中与组件相关的顶级对象
    			1. React.createClass({			创建一个组件,返回值是创建的组件
    					getInitialState: function() {	设置初始化状态state;
							return {
								display: "inline",
							}
						}
						render: function() {		返回组件的基本dom结构,输出变量用{}
							return (<div>
										<button onClick={this.clickHandler}>点我</button>		this指当前组件,
    									<span style={{display: this.state.display}}>有没有啊</span>		设置样式
    									<span ref="xxx"></span>			ref类似id,class,用来定位组件,可以用this.refs.xxx来获取;
							</div>)
						},
						clickHandler: function() {}		在button定义的事件函数
							this.refs.xxx 				this指当前组件. this.refs.xxx 指ref="xxx"的组件;
							this.setState({				设置当前组件状态;
								display: "none",	
							})
							
						}	
    			})

    		2. ReactDOM: React操作中与dom相关的顶级对象
				1. ReactDOM.render(组件, dom) : 把组件放到dom里面,组件和dom都必须保证是一个;
				2. ReactDOM.findDOMNode(this.refs.xxx): 获取ref="xxx"的dom元素;返回值dom 元素;
    		 */


    		/*
    		1. React.createClass({})
    			1. TestClickHandlerComponent: 吧span的样式作为变量,存在state中,当点击时,改变state
    				1. render: button: onClick,span: style={{display: this.state.display}}
    				2. clickHandler: 
    					1. ReactDOM.findDOMNode(ref),
    					2. 判断,this.setState()
    				3. getInitialState
    			2. TestInputHandlerComponent 用ref; 用ref找到span元素,注册事件onChange时,设置span元素的innerText;
    				1. render: input: onChange, span ref
    				2. changeHandler:
    					1. ReactDOM.findDOMNode(ref)
    					2. tipE.innerText;
    		2. ReactDOM.render(组件,dom)

    		 */
    		
    		var TestClickHandlerComponent = React.createClass({
    			render: function() {
    				return (<div>
    					<button onClick={this.clickHandler}>点我</button>
    					<span style={{display: this.state.display}}>有没有啊</span>
    					</div>);
    			},
    			getInitialState: function() {
    				return {
    					display: "inline",
    				}
    			},
    			clickHandler: function(event) {
    				event.stopPropagation();
    				event.preventDefault();
    				if (this.state.display === "inline") {
    					this.setState({
    						display: "none",
    					})
    				} else {
    					this.setState({
    						display: "inline",
    					})
    				}
    			}
    		})

    		var TestInputHandlerComponent = React.createClass({
    			render: function() {
    				return (<div>
    						<input  type='text' onChange={this.changeHandler} />
    						<span ref="tip"></span>
    					</div>)
    			},
    			changeHandler: function(event) {
    				event.stopPropagation();
    				event.preventDefault();
    				var tipE = ReactDOM.findDOMNode(this.refs.tip);
    				tipE.innerText = event.target.value;
    			}
    		})

    		ReactDOM.render(
    			<div>
    				<TestClickHandlerComponent />
    				<TestInputHandlerComponent />
    			</div>, 
    			document.getElementById('container'))
    	</script>
    </body>
</html>