React組件中如何使用bind

class App extends Component {
 constructor() {
  super();
  this.state = {
   isChecked: false
  };
 }
 render() {
  return (


   
    
     check me:
     
    
   

頁(yè)面上放了一個(gè) checkbox 元素，點(diǎn)擊之后切換其選中狀態(tài)。這是很直觀的一段代碼，但并不會(huì)像你想的那樣正常工作。

事件處理器上下文丟失的報(bào)錯(cuò)

因?yàn)?checkbox 的 onChange 事件處理器中，找不到 React 組件的 setState 方法，這說(shuō)明其執(zhí)行時(shí)的上下文不是該組件，而是別的什么東西，具體我們來(lái)調(diào)試下。

調(diào)試查看丟失上下文后 this 的值

出乎意料，是 undefined，這個(gè)方法在一個(gè)完全野生的環(huán)境下執(zhí)行，沒(méi)有任何上下文。

WHY

當(dāng)然這并不是 React 的鍋，這是 JavaScript 中 this 的工作原理。具體可參見(jiàn) Chapter 2: this All Makes Sense Now! 來(lái)追溯其底層原因，簡(jiǎn)單來(lái)講 this 的值取決于函數(shù)調(diào)用的方式。

默認(rèn)的綁定

function display(){
 console.log(this)
}

display() // 嚴(yán)格模式下為全局 `window`，非嚴(yán)格模式下為 `undefined`

隱式綁定

通過(guò)對(duì)象來(lái)調(diào)用，該函數(shù)的上下文被隱式地指定為該對(duì)象。

var obj = {
 name: 'Nobody',
 display: function(){
  console.log(this.name);
  }
 };
 obj.display(); // Nobody. 里面取的是 obj 身上的 `name` 屬性

但，如果把該對(duì)象上的方法賦值給其他變量，或通過(guò)參數(shù)傳遞的形式，再執(zhí)行，那光景就又不一樣了。

var obj = {
 name: "Nobody",
 display: function() {
  console.log(this.name);
 }
};
var name = "global!";
var outerDisplay = obj.display;
outerDisplay(); // global! 這里取到的 `name` 是全局中的內(nèi)個(gè)

這里賦值給 outerDisplay 后再調(diào)用，等同于調(diào)用一個(gè)普通函數(shù)，而不是對(duì)象中的那個(gè)，所以此時(shí) this 為全局對(duì)象，剛好全局里面有定義一個(gè) name 變量。同樣地，如果是嚴(yán)格模式下，因?yàn)榇藭r(shí) this 為 undefined，所以訪問(wèn)不到所謂的 undefiend.name，于是會(huì)拋錯(cuò)。

function invoker(fn) {
 fn();
}

setTimeout( obj.display, 1000 ); // global!
invoker(obj.display); // global!

這里 setTimeout 調(diào)用的時(shí)候，因?yàn)樗暮灻麑?shí)際上是 setTimeout(fn,delay)，所以，可以理解為將 obj.display 賦值給了它的入?yún)?fn，實(shí)際上執(zhí)行的是 fn 而不再是對(duì)象上的方法了。對(duì)于 invoker 函數(shù)也是一樣的道理。

強(qiáng)制綁定

這個(gè)時(shí)候，bind 就成了那個(gè)拯救世界的英雄，任何時(shí)間我們都可以通過(guò)它來(lái)顯式地指定函數(shù)的執(zhí)行上下文。

var name = “global!”;
obj.display = obj.display.bind(obj); 
var outerDisplay = obj.display;
outerDisplay(); // Nobody

bind 將指定的上下文與函數(shù)綁定后返回一個(gè)新的函數(shù)，這個(gè)新函數(shù)再拿去賦值或傳參什么的都不會(huì)對(duì)其上下文產(chǎn)生影響了，執(zhí)行時(shí)始終是我們指定的那個(gè)。

現(xiàn)場(chǎng)還原

有了上面的背景，就可以還原文章開(kāi)頭的問(wèn)題了，即事件處理器的上下文 丟失的問(wèn)題。

JSX 中的 HTML 標(biāo)簽本質(zhì)上對(duì)應(yīng) React 中創(chuàng)建該標(biāo)簽的一個(gè)函數(shù)。比如你寫的 div 編譯會(huì)其實(shí)是 React.createElement(‘div')。所以當(dāng)你書(shū)寫 時(shí)其實(shí)是調(diào)用了 React.createElement 來(lái)創(chuàng)建一個(gè) 標(biāo)簽。

React.createElement(
 type,
 [props],
 [...children]
)

標(biāo)簽上的屬性會(huì)作為 props 參數(shù)傳遞給 createElement 函數(shù)。

 表示將組件中的 toggleCheck 方法賦值給 createElement 的入?yún)?props（props 是個(gè)對(duì)象，接收所有書(shū)寫在標(biāo)簽上的屬性，），實(shí)際調(diào)用的時(shí)候一如上面所說(shuō)的，調(diào)用的已經(jīng)不是組件中的 toggleCheck 方法了。

React.createElement(type, props){
 // 讓我們創(chuàng)建一個(gè)  并在  的值發(fā)生變化的時(shí)候調(diào)用一下 `props.onChange`
 ...
 props.onChange() // 它已經(jīng)不是原來(lái)的方法了，丟失了上下文
 ...
}

因?yàn)?ES6 的 Class 是在嚴(yán)格模式下執(zhí)行的，所以事件處理器中如果使用了 this 那它就是 undefined。

所以你看到 React 官方的示例中，constructor 里有 bind(this) 的語(yǔ)句就不奇怪了，就是為了糾正這個(gè)事件處理器歪了的執(zhí)行上下文。

 constructor() {
  super();
  this.state = {
   isChecked: false
  };
+ this.toggleCheck = this.toggleCheck.bind(this);
 }

這樣是能正常工作了，但是，這句代碼的存在真的很別扭，因?yàn)椋?/p>

?對(duì)于業(yè)務(wù)來(lái)說(shuō)，毫無(wú)意義，徒增代碼量
?很丑陋，每加一個(gè)處理器就要加一條這樣的綁定
?冗余，這樣重復(fù)的代碼大量冗余在項(xiàng)目中，在搜索中混淆了原本的方法

避免的方式有很多，就看哪種最對(duì)味。下面來(lái)看看如何避免寫這些綁定方法。

#0行內(nèi)的綁定

最簡(jiǎn)單的可以在行內(nèi)進(jìn)行綁定操作，這樣不用單獨(dú)寫一句出來(lái)。

#1箭頭函數(shù)

因?yàn)榧^函數(shù)不會(huì)創(chuàng)建新的作用域，其上下文是語(yǔ)義上的（lexically）上下文。所以在綁定事件處理器時(shí)，直接使用剪頭函數(shù)是很方便的一種規(guī)避方法。

  this.toggleCheck()}
     />

#2將類的方法改成屬性

如果將這個(gè)處理器作為該組件的一個(gè)屬性，這個(gè)屬性作為事件的處理器以箭頭函數(shù)的形式存在，執(zhí)行的時(shí)候也是能正常獲取到上下文的。

- toggleCheck() {
+ toggleCheck = () => {
  this.setState(currentState => {
   return {
    isChecked: !currentState.isChecked
   };
  });
 }

到此，關(guān)于“React組件中如何使用bind”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！