這篇文章給大家分享的是有關(guān)react需要綁定this的原因的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),雨湖企業(yè)網(wǎng)站建設(shè),雨湖品牌網(wǎng)站建設(shè),網(wǎng)站定制,雨湖網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,雨湖網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

react需要綁定this的原因：在組件上綁定事件監(jiān)聽器，是為了響應(yīng)用戶的交互動(dòng)作，特定的交互動(dòng)作觸發(fā)事件時(shí)，監(jiān)聽函數(shù)中往往都需要操作組件某個(gè)狀態(tài)的值，進(jìn)而對(duì)用戶的點(diǎn)擊行為提供響應(yīng)反饋

react需要綁定this的原因：

1. 代碼執(zhí)行的細(xì)節(jié)

當(dāng)在其他組件中調(diào)用或是使用ReactDOM.render()方法將其渲染到界面上時(shí)會(huì)生成一個(gè)組件的實(shí)例，因?yàn)榻M件是可以復(fù)用的，面向?qū)ο蟮木幊谭绞椒浅＿m合它的定位。根據(jù)this指向的基本規(guī)則就可以知道，這里的this最終會(huì)指向組件的實(shí)例。

組件實(shí)例生成的時(shí)候，構(gòu)造器constructor會(huì)被執(zhí)行，此處著重分析一下下面這行代碼：

this.handleClick = this.handleClick.bind(this);

此時(shí)的this指向新生成的實(shí)例，那么賦值語(yǔ)句右側(cè)的表達(dá)式先查找this.handleClick( )這個(gè)方法，由對(duì)象的屬性查找機(jī)制（沿原型鏈由近及遠(yuǎn)查找）可知此處會(huì)查找到原型方法this.handleClick( ),接著執(zhí)行bind(this)，此處的this指向新生成的實(shí)例，所以賦值語(yǔ)句右側(cè)的表達(dá)式計(jì)算完成后，會(huì)生成一個(gè)指定了this的新方法，接著執(zhí)行賦值操作，將新生成的函數(shù)賦值給實(shí)例的handleClick屬性，由對(duì)象的賦值機(jī)制可知，此處的handleClick會(huì)直接作為實(shí)例屬性生成?？偨Y(jié)一下，上面的語(yǔ)句做了一件這樣的事情：

把原型方法handleClick()改變?yōu)閷?shí)例方法handleClick(),并且強(qiáng)制指定這個(gè)方法中的this指向當(dāng)前的實(shí)例。

2. ES5的寫法中為什么不用bind(this)?

ES5的寫法是指使用React.createClass( )方法來定義組件，React在V16以上的新版本中已經(jīng)移除了這個(gè)API，你可以通過閱讀更早版本的源代碼看到這個(gè)方法的細(xì)節(jié)。

  //舊版本`react`中`createClass`方法片段
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

在老版本的React中，createClass()的定義中可以看到上面的代碼，拋開其他復(fù)雜的邏輯，從方法名就可以看出這是一個(gè)自動(dòng)綁定的方法，實(shí)際上在這個(gè)方法中所完成的，就是對(duì)組件中自定義方法的this強(qiáng)制綁定，感興趣的讀者可以自行翻看源碼了解細(xì)節(jié)。

3. 綁定this的必要性

在組件上綁定事件監(jiān)聽器，是為了響應(yīng)用戶的交互動(dòng)作，特定的交互動(dòng)作觸發(fā)事件時(shí)，監(jiān)聽函數(shù)中往往都需要操作組件某個(gè)狀態(tài)的值，進(jìn)而對(duì)用戶的點(diǎn)擊行為提供響應(yīng)反饋，對(duì)開發(fā)者來說，這個(gè)函數(shù)觸發(fā)的時(shí)候，就需要能夠拿到這個(gè)組件專屬的狀態(tài)合集（例如在上面的開關(guān)組件ToggleButton例子中，它的內(nèi)部狀態(tài)屬性state.isToggleOn的值就標(biāo)記了這個(gè)按鈕應(yīng)該顯示ON或者OFF），所以此處強(qiáng)制綁定監(jiān)聽器函數(shù)的this指向當(dāng)前實(shí)例的也很容易理解。

React構(gòu)造方法中的bind會(huì)將響應(yīng)函數(shù)與這個(gè)組件Component進(jìn)行綁定以確保在這個(gè)處理函數(shù)中使用this時(shí)可以時(shí)刻指向這一組件的實(shí)例。

4. 如果不綁定this

如果類定義中沒有綁定this的指向,當(dāng)用戶的點(diǎn)擊動(dòng)作觸發(fā)this.handleClick()這個(gè)方法時(shí)，實(shí)際上執(zhí)行的是原型方法，可這樣看起來并沒有什么影響，如果當(dāng)前組件的構(gòu)造器中初始化了state這個(gè)屬性，那么原型方法執(zhí)行時(shí)，this.state會(huì)直接獲取實(shí)例的state屬性，如果構(gòu)造其中沒有初始化state這個(gè)屬性（比如React中的UI組件），說明組件沒有自身狀態(tài)，此時(shí)即使調(diào)用原型方法似乎也沒什么影響。

事實(shí)上的確是這樣，這里的bind(this)所希望提前規(guī)避的，就是著名的this指針丟失的問題。

例如使用解構(gòu)賦值的方式獲取某個(gè)屬性方法時(shí)，就會(huì)造成引用轉(zhuǎn)換丟失this的問題:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

上例中解構(gòu)賦值獲取到的handleClick這個(gè)方法在執(zhí)行時(shí)就會(huì)報(bào)錯(cuò)，Class的內(nèi)部是強(qiáng)制運(yùn)行在嚴(yán)格模式下的，此處的this在賦值中丟失了原有的指向，在運(yùn)行時(shí)指向了undefined，而undefined是沒有屬性的。

另一個(gè)存在的限制，是沒有綁定this的響應(yīng)函數(shù)在異步運(yùn)行時(shí)可能會(huì)出問題，當(dāng)它作為回調(diào)函數(shù)被傳入一個(gè)異步執(zhí)行的方法時(shí)，同樣會(huì)因?yàn)閬G失了this的指向而引發(fā)錯(cuò)誤。

如果沒有強(qiáng)制指定組件實(shí)例方法的this，在將來的使用中就無(wú)法安心使用引用轉(zhuǎn)換或作為回調(diào)函數(shù)傳遞這樣的方式，對(duì)于后續(xù)使用和協(xié)作開發(fā)而言都是不方便的。

5. 小結(jié)

this的使用非常靈活，但這種靈活性也帶來了很多混亂。這里的bind(this)是為了改進(jìn)javascript語(yǔ)言級(jí)的缺陷，并不是只有React中才需要這樣做，這個(gè)問題是伴隨著面向?qū)ο缶幊潭a(chǎn)生的，在使用javascript進(jìn)行插件和框架的開發(fā)時(shí)，這個(gè)問題的影響會(huì)更加明顯。之所以說它是一個(gè)語(yǔ)言級(jí)的缺陷，是因?yàn)镴ava中對(duì)于this在同樣場(chǎng)景下的指向更符合正常思維邏輯，而javascript中如果不顯示綁定，就會(huì)出現(xiàn)語(yǔ)言運(yùn)行結(jié)果和方法的命名表意不一致的情況。

感謝各位的閱讀！關(guān)于“react需要綁定this的原因”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享文章：react需要綁定this的原因-創(chuàng)新互聯(lián)
標(biāo)題來源：http://jinyejixie.com/article22/dcjcjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)