首页 > 代码库 > React数据传递

React数据传递

React基础概念

  1. React是基于组件化的开发,通过组件的组合,让web应用能够实现桌面应用的效果。
  2. React更有利于单页应用的开发。
  3. 并非MVC框架,只能算是V
  4. 具有单项数据流的特点
  5. 优势:代码复用率比较高。虚拟DOM,减少真实DOM操作,能够能够提高渲染的效率,

State 属性

this.props只能获取数据,不能修改,不能进行设置操作。

this.props和this.state的区别: this.state:每个组件都有state属性(独立的属性),state有读取和修改的功能。 能够做到虚拟DOM到真实DOM的修改,不能进行父组件向子组件的船值。 this.props:可以由父组件传值给子组件。

  1. 初始化State:
1 getInitialState:function(){2     return {3         cnt:04     }5 }

 

 
  1. 设置State
  2. 获取state的值
1 count:function(){2     this.setState({3         cnt: this.state.cnt+14     })5 },6 7 <label>{this.state.cnt}</label>

 

 

react 中的input输入框不能修改

1 defaultValue = http://www.mamicode.com/{this.state.cnt}    //默认value2     onChange={}                     //只要改变输入框中的值,就会触发事件

 

 

获取真实DOM节点

  1. 通过属性获取

    对要获取的input框添加 ref=""属性 (this.refs.pwdInput.refs.input.value)

  2. 函数方法

    对要获取的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对象。、

组件的生命周期

三个方法

  1. componentWillMount //组件渲染之前
  2. render //组件渲染
  3. componentDidMount //组件渲染后

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

React数据传递