前言

相信大家當想起箭頭函數時，腦海里可能會浮現 棒，酷，簡潔，有趣 等形容詞，其實，我們存在一些 更充分的理由 使我們在聯想起 箭頭函數 時不得不想到的，本文詳細的給大家介紹了關于React何時使用箭頭函數的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹：

解決 this 引起的問題

箭頭函數不會在函數體內重新定義 this 的值，這使得在回調中的行為更容易預測，并且避免了 this 在回調中潛存的 bug

下面我們來看一個 example

我們期望點擊按鈕，改變按鈕顏色，代碼如下

class BrokenButton extends React.Component { render() { return (  <button onClick={this.handleClick} style={this.state}>  Set background to red  </button> ); } handleClick() { this.setState({ backgroundColor: "red" }); }}render(<BrokenButton />, document.getElementById("root"));

然而，當我們點擊按鈕時，什么效果都沒有，為什么會這樣呢

其實，不是 handleClick 方法沒有起作用，因為 JavaScript 中壓根沒有方法， JavaScript 中只有函數，而函數中的 this 存在一些規則，正是這些規則，讓上面的 handleClick 中的 this 值變成了 null

你需要清楚明白的是： 你無法確定一個方法函數中 this 的指向，因為它的值跟函數的調用方式有關

除非，你使用 箭頭函數，因為箭頭函數中 this 的值是繼承自 外圍作用域

class Button extends React.Component { render() { return (  <button  onClick={() => this.setState({ backgroundColor: "red" })}  style={this.state}  >  Set background to red  </button> ); }}render(<Button />, document.getElementById("root"));

現在就對了，接下來，我們繼續

瀏覽器支持

瀏覽器對 箭頭函數 的支持大概是 73%，因為目前，IE 并不支持。但如果你已經意識到這一點，并且你還會代碼轉譯，這對你來說就不算什么問題

性能問題

大家都發現了，箭頭函數 書寫起來是非常容易的，但書寫忒多的函數，也會造成一些問題

定義函數是昂貴的

瀏覽器每執行一次 =>，就需要創建一個 新的函數對象，這其實是一個比較 昂貴 的操作

當然，如果你不是想構建一個 性能超級無敵宇宙螺旋棒 的組件，渲染一個 非常長 的列表或 非常大 的表格，你也不會發現這是一個 問題

所以，如果你的組件只是在頁面中渲染個幾次，你也 沒必要忒擔心 性能這方面的問題

兩個相同的箭頭函數并不相等

為了讓大家意識到這個問題，接下來，我們用 == 比較一下兩個相同的箭頭函數相不相等

const a = x => x,  b = x => x;render( <div> <h3>  Are <code>a</code> and <code>b</code> equal by <code>==</code>? </h3> <p>  {a == b ? "Yes!" : "No :("} </p> </div>, document.getElementById("root"));