锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / React / React双向绑定
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

双向绑定辅助工具


ReactLink是一种简单表达React双向绑定的方式。

注意:

如果你是这个框架的初学者,记住ReactLink对于大多数应用来说都是不需要的,应该谨慎使用。

在React里面,数据流是一个方向的:从拥有者到子节点。这是因为根据the Von Neumann model of computing,数据仅向一个方向传递。你可以认为它是单向数据绑定。

然而,有很多应用需要你读取一些数据,然后传回给你的程序。例如,在开发表单的时候,当你接收到用户输入时,你将会频繁地想更新某些React state。或者你想在JavaScript中演算布局,然后反应到某些DOM元素的尺寸上。

在React中,你可以通过监听一个“change”事件来实现这个功能,从你的数据源(通常是DOM)读取,然后在你某个组件上调用setState()。"关闭数据流循环"明显会引导写出更加容易理解的和维护的程序。查看我们的表单文档来获取更多信息。

双向绑定 -- 隐式地强制在DOM里面的数据总是和某些React state保持一致 -- 是简明的,并且支持非常多的应用。我们已经提供了ReactLink:如上所述,是一种设置通用数据流循环模型的语法糖,或者说“关联”某些数据到React state。

注意:

ReactLink仅仅是一个onChange/setState()模式的简单包装和约定。它不会从根本上改变数据在你的React应用中如何流动。

ReactLink: 前后对比

这是一个简单的表单示例,没有使用ReactLink:

var NoLink = React.createClass({    
getInitialState: function() {      
return {message: 'Hello!'};    
},    
handleChange: function(event) {      
this.setState({message: event.target.value});    
},    
render: function() {      
var message = this.state.message;      
return <input type="text" value={message} onChange={this.handleChange} />;    
}  
});  

这段代码运行地很好,数据如何流动是非常清晰的,但是,如果表单有大量的字段,代码就会很冗长了。让我们使用ReactLink来减少打字输入:

var WithLink = React.createClass({    
mixins: [React.addons.LinkedStateMixin],    
getInitialState: function() {      
return {message: 'Hello!'};    
},    
render: function() {      
return <input type="text" valueLink={this.linkState('message')} />;    
}  
});  

LinkedStateMixin给你的React组件添加一个叫做linkState()的方法。linkState()返回一个ReactLink对象,包含React state当前的值和一个用来改变它的回调函数。

ReactLink对象可以在树中作为props被向上传递或者向下传递,so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.

注意,对于checkbox的value属性,有一个特殊的行为,如果checkbox被选中(默认是on),value属性值将会在表单提交的时候发送出去。当checkbox被选中或者取消选中的时候,value属性是不会更新的。对于checkbox,你应该使用checkLink而不是valueLink:

<input type="checkbox" checkedLink={this.linkState('booleanValue')} />  

底层原理(Under the Hood)

对于ReactLink,有两块儿:你创建ReactLink实例的地方和你使用它的地方。为了证明ReactLink是多么的简单,让我们单独地重写每一块儿,以便显得更加明了。

不带ReactLink的LinkedStateMixin(ReactLink Without LinkedStateMixin)

var WithoutMixin = React.createClass({    
getInitialState: function() {      
return {message: 'Hello!'};    
},    
handleChange: function(newValue) {      
this.setState({message: newValue});    
},    
render: function() {      
var valueLink = {        
value: this.state.message,        
requestChange: this.handleChange      
};      
return <input type="text" valueLink={valueLink} />;    
}  
});  

如你所见,ReactLink对象是非常简单的,仅仅有一个value和requestChange属性。LinkedStateMixin也同样简单:它仅占据这些字段,用来自于this.state的值和一个调用this.setState()的回调函数。(And LinkedStateMixin is similarly simple: it just populates those fields with a value from this.state and a callback that callsthis.setState().)

不带valueLink的ReactLink(ReactLink Without valueLink)

var WithoutLink = React.createClass({    
mixins: [React.addons.LinkedStateMixin],    
getInitialState: function() {      
return {message: 'Hello!'};    
},    
render: function() {      
var valueLink = this.linkState('message');      
var handleChange = function(e) {        
valueLink.requestChange(e.target.value);      
};      
return <input type="text" value={valueLink.value} onChange={handleChange} />;    
}  
});  

valueLink属性也很简单。它简单地处理onChange事件,然后调用this.props.valueLink.requestChange(),同时也用this.props.valueLink.value替换this.props.value。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内