深入理解React中何時使用箭頭函數(shù)

2024-05-06 16:39:12

字體：大中小

供稿：網(wǎng)友

前言

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

解決 this 引起的問題

箭頭函數(shù)不會在函數(shù)體內(nèi)重新定義 this 的值，這使得在回調(diào)中的行為更容易預測，并且避免了 this 在回調(diào)中潛存的 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 中只有函數(shù)，而函數(shù)中的 this 存在一些規(guī)則，正是這些規(guī)則，讓上面的 handleClick 中的 this 值變成了 null

你需要清楚明白的是：你無法確定一個方法函數(shù)中 this 的指向，因為它的值跟函數(shù)的調(diào)用方式有關(guān)

除非，你使用箭頭函數(shù)，因為箭頭函數(shù)中 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"));

現(xiàn)在就對了，接下來，我們繼續(xù)

瀏覽器支持

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

性能問題

大家都發(fā)現(xiàn)了，箭頭函數(shù) 書寫起來是非常容易的，但書寫忒多的函數(shù)，也會造成一些問題

定義函數(shù)是昂貴的

瀏覽器每執(zhí)行一次 =>，就需要創(chuàng)建一個新的函數(shù)對象，這其實是一個比較昂貴的操作

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

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

兩個相同的箭頭函數(shù)并不相等

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

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

如果你在 render 中使用箭頭函數(shù)，那么你在每次調(diào)用 render 時都會去創(chuàng)建一個新的函數(shù)對象，此時，即使使用 PureComponent 和 shouldComponentUpdate 也起不到優(yōu)化作用

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

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

只定義一次

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

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

如果你使用了 Babel 或 create-react-app 構(gòu)建你的應用，你可以將箭頭函數(shù)設置為 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" }); };}

總結(jié)