如何在React中使用箭頭函數

如何在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>
 <h4>
  Are <code>a</code> and <code>b</code> equal by <code>==</code>?
 </h4>
 <p>
  {a == b ? "Yes!" : "No :("}
 </p>
 </div>,
 document.getElementById("root")
);

如果你在 render 中使用箭頭函數，那么你在每次調用 render 時都會去創建一個新的函數對象，此時，即使使用 PureComponent 和 shouldComponentUpdate 也起不到優化作用

你可以在下面實例中看清這一點，其中， <PropChangeCounter /> 組件用于打印 props 改變的次數

import PropChangeCounter from "react-armory-prop-change-counter";

class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = { email: "" };
 }
 render() {
 return (
  <div>
  <input
   placeholder="Email"
   value={this.state.email}
   onChange={e => this.setState({ email: e.target.value })}
  />
  <PropChangeCounter
   constant={"this doesn't change"}
   value={this.state.email}
   onChange={e => this.setState({ email: e.target.value })}
  />
  </div>
 );
 }
}

render(<App />, document.getElementById("root"));

只定義一次

如果你覺得 性能 對你的組件很重要，那么你肯定會想如果在組件中只定義箭頭函數 一次 該有多好

其中一種實現方式是在 constructor 中使用箭頭函數，當然，對于復雜些的組價來說，這會變的很笨拙

如果你使用了 Babel 或 create-react-app 構建你的應用，你可以將箭頭函數設置為 class fields 或 arrow function methods

如下，你可以將 handleClick 重新定義為一個 arrow function method，來修復第一個 example 中的 bug

class Button extends React.Component {
 render() {
 return (
  <button onClick={this.handleClick} style={this.state}>
  Set background to red
  </button>
 );
 }

 // Note: this syntax is not yet part of JavaScript proper, but is slated
 // for inclusion in the next version. It should already work with Babel.
 handleClick = () => {
 this.setState({ backgroundColor: "red" });
 };
}

關于如何在React中使用箭頭函數問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。