[譯] React 組件中綁定回調

Lin_R 發布于2019-08-22 10:33 / 2476人閱讀

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

原文：Binding callbacks in React components

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

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

很好，這段代碼會滿足你的需求，那現在如果我想在handleClick()內調用另外一個方法，比如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)

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

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

不好的方案 1：箭頭函數

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

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

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

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

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

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

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

function test() {}

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

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

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

好的方案：在構造函數（constructor）中bind handleClick

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

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")
  }
}

很好，現在我們的函數被綁定到正確的上下文，而且不會在每次渲染的時候創建新的函數。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90820.html

【譯】Handling Events

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

sugarmo 2019-08-20 14:47 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（下）——美化與功能

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

Luosunce 2019-08-20 19:05 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（下）——美化與功能

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

Cheng_Gang 2019-07-30 14:35 評論0 收藏0
React思維方式·譯

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

helloworldcoding 2019-08-20 14:24 評論0 收藏0
【譯】函數組件和類組件有什么不同？

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

gself 2019-08-23 16:24 評論0 收藏0