生活随笔
收集整理的這篇文章主要介紹了
react 实现数据双向绑定
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先從沒有使用mixin的例子引入
?
[javascript]?view plaincopy print?
var?BindingExample?=?React.createClass({??????????????getInitialState:?function()?{??????????????????return?{??????????????????????text:?''??????????????????}??????????????},??????????????handleChange:?function(event)?{??????????????????this.setState({text:?event.target.value})??????????????},??????????????render:?function()?{??????????????????return?<div>??????????????????????<input?type="text"?placeholder="請輸入內(nèi)容"?onChange={this.handleChange}?/>??????????????????????<p>{this.state.text}</p>??????????????????</div>??????????????}??????????})??React.render(<BindingExample></BindingExample>,?document.body);?? ?
?
這個(gè)例子大家都很熟悉，當(dāng)input框發(fā)生改變的時(shí)候，去調(diào)用handleChange方法，然后通過setState重新render P標(biāo)簽中的數(shù)據(jù)
?
接下來引入使用mixin的一個(gè)例子，沒有使用官方的方法
?
[javascript]?view plaincopy print?
var?BindingChange=?{????????????????handleChange:?function(key)?{????????????????????var?that?=?this,??????????????????????newState?=?{};????????????????????return?function(e)?{????????????????????????newState[key]?=?e.target.value;??????????????????????that.setState(newState);????????????????????}????????????????}????????????}????????????var?BindingExample1?=?React.createClass({????????????????mixins:?[BindingChange],????????????????getInitialState:?function()?{??????????????????return?{??????????????????????text:?"",??????????????????????comment:?""??????????????????}??????????????},??????????????render:?function()?{??????????????????return?(??????????????????????<div>???????????????????????????<input?type="text"?placeholder="請輸入內(nèi)容"?onChange={this.handleChange('text').bind(this)}?/>???????????????????????????????????<textarea?onChange={this.handleChange('comment').bind(this)}></textarea>???????????????????????????????????????<p>{this.state.text}</p>???????????????????????????????????????<p>{this.state.comment}</p>??????????????????????</div>??????????????????);??????????????}????????????})??????????React.render(<BindingExample1?/>,document.body);??
來分析一下這個(gè)例子
?
首先看BindingExample中的render，仔細(xì)觀察一下實(shí)際上和例子一沒有什么區(qū)別，只是在onChange處理的函數(shù)上綁定了上下文，還在在函數(shù)里面?zhèn)髁艘粋€(gè)值（key）
這個(gè)key和state中對應(yīng)的key值要相同，如例子中input改變的時(shí)候是修改state中的"text"這個(gè)狀態(tài)，所以傳入"text"。
然后再看BindingExample中的mixins，把BindingChange引用了進(jìn)來，在引用之后，BindingChange中的東西就會(huì)變成BindingExample的東西
所以onChange那里進(jìn)行bind之后，BindingChange的this指針指向了BindingExample，而不是window。
?
接著看一下BindingChange。先定義了一個(gè)that來保存當(dāng)前的this，接下里定義了一個(gè)對象
為什么要定義一個(gè)對象呢。
可以發(fā)現(xiàn)，React中setState要修改的狀態(tài)名字不是一個(gè)字符串，也不能解析變量。如果假如onChange事件中傳入的key為"text"，直接這樣修改 setState({key:event.target.value}) 實(shí)際上并沒有修改text的值，然是去修改了key的值，然而我們并沒有在實(shí)際的代碼中存在key這個(gè)狀態(tài)，所以并不會(huì)發(fā)生改變。
所以在return的那個(gè)函數(shù)中newState[key] = e.target.value,這個(gè)時(shí)候key就可以解析成了text，并且進(jìn)行了賦值，然后將該對象傳入setState中，text這個(gè)狀態(tài)得以改變。
當(dāng)然，假如傳入的是comment這個(gè)值，那么這個(gè)key實(shí)際上就是comment，然后改變的是comment的狀態(tài)
?
讀到這里大家可能都發(fā)現(xiàn)了，mixin做的就是把一些相同的東西抽離出來，就像這個(gè)onChange事件，如果沒用mixin的話，可能就要寫onChange1和onChange2。實(shí)際上就像方法的封裝一下。當(dāng)然也有不好的地方，就是查找這個(gè)方法的時(shí)候可能不會(huì)一下子找到。
?
最后引入官方的例子
?
[javascript]?view plaincopy print?
var?BindingExample2?=?React.createClass({??????mixins:?[React.addons.LinkedStateMixin],??????getInitialState:?function()?{??????????return?{??????????????text:?"",??????????????comment:?""??????????}??????},??????render:?function()?{??????????return?(??????????????<div>??????????????????<input?type="text"?placeholder="請輸入內(nèi)容"?valueLink={this.linkState('text')}?/>???????????????????????????????????<textarea?valueLink={this.linkState('comment')}></textarea>???????????????????????????????????<p>{this.state.text}</p>???????????????????????????????????<p>{this.state.comment}</p>??????????????</div>??????????);??????}???});???React.render(<BindingExample2?/>,document.body);?? 對比例子2，我們發(fā)現(xiàn)在mixin中使用了React.addons.LinkedStateMixin，這個(gè)就是官方封裝好的自己的雙向綁定的方法
?
再往下讀下去發(fā)現(xiàn)onChange事件變成了valueLink，然后使用了方法linkState，而傳入的值依舊是這個(gè)input想要改變的狀態(tài)的名字。
?
我們來看一下官方的這個(gè)方法是怎么封裝的
?
[javascript]?view plaincopy print?
var?ReactLink?=?_dereq_(75);???????var?ReactStateSetters?=?_dereq_(94);?????????var?LinkedStateMixin?=?{???????????linkState:?function(key)?{???????????????return?new?ReactLink(???????????????????this.state[key],???????????????????ReactStateSetters.createStateKeySetter(this,?key)???????????????);???????????}???????};?????????module.exports?=?LinkedStateMixin;?? 這個(gè)就是方法封裝的mixin的LinkedStateMixin方法
?
官方是這么解釋的
ReactLink encapsulates a common pattern in which a component wants to modify a prop received from its parent.
ReactLink封裝了一個(gè)需要從父級獲取值并且修改的一個(gè)公有的模式。（實(shí)際上就是綁定上下文環(huán)境，然后函數(shù)的封裝）
?
然后我們?nèi)ゲ榭碦eactStateSetters.createStateKeySetter這個(gè)方法是這樣寫的
?
[javascript]?view plaincopy print?
createStateKeySetter:?function(component,?key)?{??????var?cache?=?component.__keySetters?||?(component.__keySetters?=?{});????return?cache[key]?||?(cache[key]?=?createStateKeySetter(component,?key));??}?? 傳入上下文環(huán)境，傳入要修改的狀態(tài)的名字。看到cache，大家也能明白這是緩存的意思，判斷是否有這個(gè)狀態(tài)，有的話直接復(fù)制，并返回。沒有的話就創(chuàng)建一個(gè)對象，然后進(jìn)入(cache[key] = createStateKeySetter(component, key))這個(gè)方法中
?
?
然后繼續(xù)找到了createStateKeySetter，他是這個(gè)樣子的
?
[javascript]?view plaincopy print?
function?createStateKeySetter(component,?key)?{????var?partialState?=?{};????return?function?stateKeySetter(value)?{??????partialState[key]?=?value;??????component.setState(partialState);????};??}?? 繼續(xù)傳入上下文環(huán)境，傳入要修改的狀態(tài)的名字。然后往下讀，是不是突然發(fā)現(xiàn)很熟悉，這個(gè)不就是和例子二中的handleChange是一模一樣的。
?
?
此篇博文到此就結(jié)束了。
?
轉(zhuǎn)載于:https://www.cnblogs.com/rubyxie/articles/5920096.html
總結(jié)
以上是生活随笔為你收集整理的react 实现数据双向绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
