> 原文出處：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。