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
  5  ref= {function(ele){    //子组件
  6      this._input = ele;
  7  }.bind(this)}
  8  
  9  //使用的时候
  10  
  11  this._pwd._input
  
  
  　　也可用箭头函数 ref = {(ele)=>this._input = ele} //子组件 ref = {(ele)=>this._pwd = ele} //父组件
  
  

Ajax

另一种Ajax提交方式：
利用promise 异步模型。nodejs内部也是使用promise模型实现的单线程异步原理。
fetch()方法，采用promise实现异步提交，没有用到XHR对象。、
组件的生命周期

三个方法

• componentWillMount //组件渲染之前
  
• render //组件渲染
  
• componentDidMount //组件渲染后
  

第一个和第三个在组件的生命周期中只执行一次。