React学习之扩展LinkedStateMixin双向绑定（三十五）

紧急事件提示

这玩意已经被React v15给抛弃了，请直接用数据设置和函数处理。

引用

import LinkedStateMixin from 'react-addons-linked-state-mixin' // ES6
var LinkedStateMixin = require('react-addons-linked-state-mixin') // ES5 with npm
var LinkedStateMixin = React.addons.LinkedStateMixin; // ES5 with react-with-addons.js

1.概要

LinkedStateMixin是一种简单表达React双向绑定的方式(angularjs的赶脚)

在React里面，数据流是一个方向的：从拥有者到子节点。这是因为冯·诺依曼模型便是如此，数据仅向一个方向传递。你可以认为它是单向数据绑定。

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

在React中，你可以通过监听一个change事件来实现这个功能，从你的数据源（通常是DOM）读取，然后在你某个组件上调用setState()。$[$关闭数据流循环保持数据的单向性$]$明显会引导写出更加容易理解的和维护的程序。

双向绑定 – 隐式地强制使DOM里面的数据总是和某些React state数据的值保持一致 – 这样就可以更容易的支持其他应用。我们已经提供了LinkedStateMixin：如上所述，是一种设置通用数据流循环模型的语法糖，或者说“关联”某些数据到React state，又或者说实现双方数据的一致性。

注意

LinkedStateMixin仅仅是一个onChange/setState()模式的简单包装和约定。它不会从根本上改变数据在你的React应用中如何流动，也就是说其实LinkedStateMixin本质还是单向流，只是通过onChange将数据更改传递给React，然后内部数据改变就自动调用setState来进行更新。

2.LinkedStateMixin：前后对比

这是一个简单的表单示例，没有使用LinkedStateMixin：

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} />;
  }
});

这段代码运行地很好，数据如何流动是非常清晰的，但是，如果表单有大量的字段，代码就会很冗长了。让我们使用LinkedStateMixin来减少代码量(如今React v15并不希望你使用这个玩意)。

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

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

valueLink 对象可以在树中作为props被向上传递或者向下传递，所以它在组件层和状态层建立起双向绑定是非常简单的。

注意

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

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

3.底层原理

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

valueLink不带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} />;
  }
});`

如你所见，valueLink 对象是非常简单的，仅仅有一个value和requestChange属性。LinkedStateMixin也同样简单：它仅占据这些字段，用来自于this.state的值和一个调用this.setState()的回调函数。

LinkedStateMixin不带valueLink

var LinkedStateMixin = require('react-addons-linked-state-mixin');

var WithoutLink = React.createClass({
  mixins: [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。

下一篇将暂时没有，嘿，可能是将源码，也可能是讲React的其它衍生。