成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯] React 組件中綁定回調(diào)

Lin_R / 2481人閱讀

摘要：好的方案在構(gòu)造函數(shù)中仍然使用，現(xiàn)在我們只要繞過每次渲染都要生成新的函數(shù)的問題就可以了。我們可以通過只在構(gòu)造函數(shù)中綁定回調(diào)的上下問來解決這個問題，因為構(gòu)造函數(shù)只會調(diào)用一次，而不是每次渲染都調(diào)用。

原文：Binding callbacks in React components

在組件中給事件綁定處理函數(shù)是很常見的，比如說每當(dāng)用戶點擊一個button的時候使用console.log打印一些東西。

class DankButton extends React.Component {
  render() {
    return 
  }
  
  handleClick() {
    console.log(`such knowledge`)
  }
}

很好，這段代碼會滿足你的需求，那現(xiàn)在如果我想在handleClick()內(nèi)調(diào)用另外一個方法，比如logPhrase()

class DankButton extends React.Component {
  render() {
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

這樣竟然不行，會得到如下的錯誤提醒

TypeError: this.logPhrase is not a function at handleClick (file.js:36:12)

當(dāng)我們把handleClick綁定到 onClick的時候我們傳遞的是一個函數(shù)的引用，真正調(diào)用handleClick的是事件處理系統(tǒng)。因此handleClick 的this上下文和我門想象的this.logPhrase()是不一樣的。

這里有一些方法可以讓this指向DankButton組件。

不好的方案 1：箭頭函數(shù)

箭頭函數(shù)是在ES6中引入的，是一個寫匿名函數(shù)比較簡潔的方式，它不僅僅是包裝匿名函數(shù)的語法糖，箭頭函數(shù)沒有自己的上下問，它會使用被定義的時候的this作為上下文，我們可以利用這個特性，給onClick綁定一個箭頭函數(shù)。

class DankButton extends React.Component {
  render() {
    // Bad Solution: An arrow function!
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

然而，我并不推薦這種解決方式，因為箭頭函數(shù)定義在render內(nèi)部，組件每次重新渲染都會創(chuàng)建一個新的箭頭函數(shù)，在React中渲染是很快捷的，所以重新渲染會經(jīng)常發(fā)生，這就意味著前面渲染中產(chǎn)生的函數(shù)會堆在內(nèi)存中，強制垃圾回收機制清空它們，這是很花費性能的。

不好的方案 2：this.handleClick.bind(this)

另外一個解決這個問題的方案是，把回調(diào)綁定到正確的上下問this

class DankButton extends React.Component {
  render() {
    // Bad Solution: Bind that callback!
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

這個方案和箭頭函數(shù)有同樣的問題，在每次render的時候都會創(chuàng)建一個新的函數(shù)，但是為什么沒有使用匿名函數(shù)也會這樣呢，下面就是答案。

function test() {}

const testCopy = test
const boundTest = test.bind(this)

console.log(testCopy === test) // true
console.log(boundTest === test) // false

.bind并不修改原有函數(shù)，它只會返回一個指定執(zhí)行上下文的新函數(shù)（boundTest和test并不相等），因此垃圾回收系統(tǒng)仍然需要回收你之前綁定的回調(diào)。

好的方案：在構(gòu)造函數(shù)（constructor）中bind handleClick

仍然使用 .bind ，現(xiàn)在我們只要繞過每次渲染都要生成新的函數(shù)的問題就可以了。我們可以通過只在構(gòu)造函數(shù)中綁定回調(diào)的上下問來解決這個問題，因為構(gòu)造函數(shù)只會調(diào)用一次，而不是每次渲染都調(diào)用。這意味著我們沒有生成一堆函數(shù)然后讓垃圾回收系統(tǒng)清除它們。

class DankButton extends React.Component {
  constructor() {
    super()
    // Good Solution: Bind it in here!
    this.handleClick = this.handleClick.bind(this)  
  }
  
  render() {
    return 
  }
  
  handleClick() {
    this.logPhrase()
  }
  
  logPhrase() {
    console.log("such gnawledge")
  }
}

很好，現(xiàn)在我們的函數(shù)被綁定到正確的上下文，而且不會在每次渲染的時候創(chuàng)建新的函數(shù)。

如果你使用的是React.createClass而不是ES6的classes，你就不會碰到這個問題，createClass生成的組件會把它們的方法自動綁定到組件的this，甚至是你傳遞給事件回調(diào)的函數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90820.html

相關(guān)文章

  • 【譯】Handling Events

    摘要：如果你使用實驗性屬性初始化語法，你能用這方法來正確綁定回調(diào)函數(shù)的綁定這語法在中默認支持。然而，如果這回調(diào)函數(shù)是作為一個傳遞到更下一級的組件中的時候，些組件可能會做一個額外的重新渲染。 下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

    sugarmo 評論0 收藏0

  • 【譯】一個小時搭建一個全棧Web應(yīng)用框架（下）——美化與功能

    摘要：點擊直達前文譯一個小時搭建一個全棧應(yīng)用框架上如果沒有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的頁面下載代碼。從服務(wù)器返回隨機語言的每當(dāng)我們與服務(wù)器上的端點進行通話時，為了能夠請求一個隨機的歐洲語言，必須更改文件中的功能。 翻譯：瘋狂的技術(shù)宅原文標題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

    Luosunce 評論0 收藏0

  • 【譯】一個小時搭建一個全棧Web應(yīng)用框架（下）——美化與功能

    摘要：點擊直達前文譯一個小時搭建一個全棧應(yīng)用框架上如果沒有，但還是要繼續(xù)學(xué)習(xí)本教程，可以到我的頁面下載代碼。從服務(wù)器返回隨機語言的每當(dāng)我們與服務(wù)器上的端點進行通話時，為了能夠請求一個隨機的歐洲語言，必須更改文件中的功能。 翻譯：瘋狂的技術(shù)宅原文標題：Creating a full-stack web application with Python, NPM, Webpack and Reac...

    Cheng_Gang 評論0 收藏0

  • React思維方式·譯

    摘要：搜索文本和多選框因為會發(fā)生變化，且不能通過計算得出，所以是狀態(tài)。最后，過濾過的產(chǎn)品列表，可以通過原始產(chǎn)品列表搜索文本和多選框值計算出來，因此它不是狀態(tài)。從傳入的回調(diào)函數(shù)會調(diào)用，從而更新組件。 在使用JavaScript開發(fā)大型、快速的網(wǎng)頁應(yīng)用時，React是我們的首選。在Facebook和Instagram，React很好地減少了我們的工作量。React最強大部分之一，是讓你在開發(fā)應(yīng)用...

    helloworldcoding 評論0 收藏0

  • 【譯】函數(shù)組件和類組件有什么不同？

    摘要：但是，你可能已經(jīng)注意到，當(dāng)你試圖通過指定依賴數(shù)組來優(yōu)化時，可能會遇到帶有過時閉包的錯誤。這是否意味著閉包是問題所在我不這么認為。到目前為止，我所看到的所有情況下，過時的閉包問題都是由于錯誤地假設(shè)函數(shù)不更改或總是相同而發(fā)生的。 原文鏈接：https://overreacted.io/how-ar... 在很長一段時間內(nèi)，標準答案是class components提供更多的特性（像sta...

    gself 評論0 收藏0

發(fā)表評論

0條評論

Lin_R

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<