> 原文出处：http://blog.oyanglul.us/javascript/react-cookbook-mini.html 解释这个问题我们需要先看什么是双向绑定，什么是单向绑定  ## 1.1 双向绑定 也就是dom 上的 value 与 controller 或者 view controller 上的绑定，值保持一致。 ## 1.2 单向绑定 dom 上的值来源于 controller，但是 dom 上的值改变不会改变 controller 上的值。 ##1.3 双向有什么不好 * perfomance * 我们真的需要吗？实际上有多少值是真的需要双向绑的 * 到底谁动了我的值？too many sources of truth ## 1.4 单向有什么好 * 只有一个 source of truth, 代码好 reason about * 更快 * 需要的时候自己绑一把，也并不是多麻烦的事 ~~~ var TwoWayBindingInput = React.createClass({ getInitialState: function() { return {message: 'Hello!'}; }, handleChange: function(event) { this.setState({message: event.target.value}); // <= (setstate) }, render: function() { var message = this.state.message; return <input type="text" value={message} onChange={this.handleChange} />; // <= (value) } }); ~~~ > 注意看这个双向绑定，[第value行](http://blog.oyanglul.us/javascript/react-cookbook-mini.html#coderef-value) 是单向绑定值 `message` 到 `input` 元素上，[第setstate行](http://blog.oyanglul.us/javascript/react-cookbook-mini.html#coderef-setstate)是把 `input` 元素的值绑定回来，但是 **注意看** 这里绑定回来需要通过 `setState` 来完成，这就保证了 React Component 的 source of truth 还是只有 state。