首页 > 代码库 > React数据传递
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:04 }5 }
- 设置State
- 获取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节点
通过属性获取
对要获取的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 //组件渲染后
第一个和第三个在组件的生命周期中只执行一次。
React数据传递
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。