ReactLink是一種簡(jiǎn)單表達(dá)React雙向綁定的方式。

注意：

如果你是這個(gè)框架的初學(xué)者，記住ReactLink對(duì)于大多數(shù)應(yīng)用來(lái)說(shuō)都是不需要的，應(yīng)該謹(jǐn)慎使用。

在React里面，數(shù)據(jù)流是一個(gè)方向的：從擁有者到子節(jié)點(diǎn)。這是因?yàn)楦鶕?jù)the Von Neumann model of computing，數(shù)據(jù)僅向一個(gè)方向傳遞。你可以認(rèn)為它是單向數(shù)據(jù)綁定。

然而，有很多應(yīng)用需要你讀取一些數(shù)據(jù)，然后傳回給你的程序。例如，在開(kāi)發(fā)表單的時(shí)候，當(dāng)你接收到用戶(hù)輸入時(shí)，你將會(huì)頻繁地想更新某些Reactstate。或者你想在JavaScript中演算布局，然后反應(yīng)到某些DOM元素的尺寸上。

在React中，你可以通過(guò)監(jiān)聽(tīng)一個(gè)“change”事件來(lái)實(shí)現(xiàn)這個(gè)功能，從你的數(shù)據(jù)源（通常是DOM）讀取，然后在你某個(gè)組件上調(diào)用setState()。"關(guān)閉數(shù)據(jù)流循環(huán)"明顯會(huì)引導(dǎo)寫(xiě)出更加容易理解的和維護(hù)的程序。查看我們的表單文檔來(lái)獲取更多信息。

雙向綁定 -- 隱式地強(qiáng)制在DOM里面的數(shù)據(jù)總是和某些React state保持一致 -- 是簡(jiǎn)明的，并且支持非常多的應(yīng)用。我們已經(jīng)提供了ReactLink：如上所述，是一種設(shè)置通用數(shù)據(jù)流循環(huán)模型的語(yǔ)法糖，或者說(shuō)“關(guān)聯(lián)”某些數(shù)據(jù)到React state。

注意：

ReactLink僅僅是一個(gè)onChange/setState()模式的簡(jiǎn)單包裝和約定。它不會(huì)從根本上改變數(shù)據(jù)在你的React應(yīng)用中如何流動(dòng)。

ReactLink： 前后對(duì)比

這是一個(gè)簡(jiǎn)單的表單示例，沒(méi)有使用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} />;
  }
});

這段代碼運(yùn)行地很好，數(shù)據(jù)如何流動(dòng)是非常清晰的，但是，如果表單有大量的字段，代碼就會(huì)很冗長(zhǎng)了。讓我們使用ReactLink來(lái)減少打字輸入：

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組件添加一個(gè)叫做linkState()的方法。linkState()返回一個(gè)ReactLink對(duì)象，包含React state當(dāng)前的值和一個(gè)用來(lái)改變它的回調(diào)函數(shù)。

ReactLink對(duì)象可以在樹(shù)中作為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.

注意，對(duì)于checkbox的value屬性，有一個(gè)特殊的行為，如果checkbox被選中（默認(rèn)是on），value屬性值將會(huì)在表單提交的時(shí)候發(fā)送出去。當(dāng)checkbox被選中或者取消選中的時(shí)候，value屬性是不會(huì)更新的。對(duì)于checkbox，你應(yīng)該使用checkLink而不是valueLink：

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

底層原理（Under the Hood）

對(duì)于ReactLink，有兩塊兒：你創(chuàng)建ReactLink實(shí)例的地方和你使用它的地方。為了證明ReactLink是多么的簡(jiǎn)單，讓我們單獨(dú)地重寫(xiě)每一塊兒，以便顯得更加明了。

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

如你所見(jiàn)，ReactLink對(duì)象是非常簡(jiǎn)單的，僅僅有一個(gè)value和requestChange屬性。LinkedStateMixin也同樣簡(jiǎn)單：它僅占據(jù)這些字段，用來(lái)自于this.state的值和一個(gè)調(diào)用this.setState()的回調(diào)函數(shù)。（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屬性也很簡(jiǎn)單。它簡(jiǎn)單地處理onChange事件，然后調(diào)用this.props.valueLink.requestChange()，同時(shí)也用this.props.valueLink.value替換this.props.value。就這么簡(jiǎn)單！