React数据传递
React基础概念[*]React是基于组件化的开发,通过组件的组合,让web应用能够实现桌面应用的效果。
[*]React更有利于单页应用的开发。
[*]并非MVC框架,只能算是V
[*]具有单项数据流的特点
[*]优势:代码复用率比较高。虚拟DOM,减少真实DOM操作,能够能够提高渲染的效率,
State 属性
this.props只能获取数据,不能修改,不能进行设置操作。
this.props和this.state的区别: this.state:每个组件都有state属性(独立的属性),state有读取和修改的功能。 能够做到虚拟DOM到真实DOM的修改,不能进行父组件向子组件的船值。 this.props:可以由父组件传值给子组件。
[*]初始化State:
1 getInitialState:function(){
2 return {
3 cnt:0
4 }
5 }
[*]设置State
[*]获取state的值
1 count:function(){
2 this.setState({
3 cnt: this.state.cnt+1
4 })
5 },
6
7 <label>{this.state.cnt}</label>
react 中的input输入框不能修改
1 defaultValue = {this.state.cnt} //默认value
2 onChange={} //只要改变输入框中的值,就会触发事件
获取真实DOM节点
[*] 通过属性获取
对要获取的input框添加 ref=""属性 (this.refs.pwdInput.refs.input.value)
[*] 函数方法
对要获取的input框添加
1 ref= {function(ele){ //父组件
2 this._pwd = ele;
3}.bind(this)}
4
5ref= {function(ele){ //子组件
6 this._input = ele;
7}.bind(this)}
8
9//使用的时候
10
11this._pwd._input
也可用箭头函数 ref = {(ele)=>this._input = ele} //子组件 ref = {(ele)=>this._pwd = ele} //父组件
Ajax
另一种Ajax提交方式:
利用promise 异步模型。nodejs内部也是使用promise模型实现的单线程异步原理。
fetch()方法,采用promise实现异步提交,没有用到XHR对象。、
组件的生命周期
三个方法
[*]componentWillMount //组件渲染之前
[*]render //组件渲染
[*]componentDidMount //组件渲染后
第一个和第三个在组件的生命周期中只执行一次。
页:
[1]