React学习笔记---双向数据流

1、在使用双向数据流的死后，我们需要引入另外一个文件

<script src="bower_components/react/react-with-addons.js"></script>

2、需要引入插件-

mixins: [ React.addons.LinkedStateMixin ],

3、在使用的时候需要通过下面标签进行引入

<input type="text" valueLink={this.linkState('message')} /><br/><input type="checkbox" checkedLink={this.linkState('isReactAwesome') } /><br/><SubComp messageLink={ this.linkState('message') } likeLink={this.linkState('isReactAwesome')} />

这样就能够实现数据的双向绑定

=====================================

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

双向绑定辅助工具
ReactLink是一种简单表达React双向绑定的方式。
注意：
如果你是这个框架的初学者，记住ReactLink对于大多数应用来说都是不需要的，应该谨慎使用。
在React里面，数据流是一个方向的：从拥有者到子节点。这是因为根据<a rel="nofollow" href="http://en.wikipedia.org/wiki/Von_Neumann_architecture" "="" style="box-sizing: border-box; background-color: transparent; color: rgb(45, 133, 202); text-decoration-line: none;">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 calls this.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。就这么简单！