1. Why not 2 way binding/为毛不用双向绑定
最后更新于:2022-04-01 05:01:58
> 原文出处:http://blog.oyanglul.us/javascript/react-cookbook-mini.html
解释这个问题我们需要先看什么是双向绑定,什么是单向绑定
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-21_564fe2d99bfb1.gif)
## 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。