資訊專欄INFORMATION COLUMN
摘要：當(dāng)我們想起箭頭函數(shù)時(shí)，腦海里可能會(huì)浮現(xiàn)棒，酷，簡潔，有趣等形容詞，其實(shí)，我們存在一些更充分的理由使我們?cè)诼?lián)想起箭頭函數(shù)時(shí)不得不想到的解決引起的問題箭頭函數(shù)不會(huì)在函數(shù)體內(nèi)重新定義的值，這使得在回調(diào)中的行為更容易預(yù)測，并且避免了在回調(diào)中潛存的下
解決 this 引起的問題當(dāng)我們想起箭頭函數(shù)時(shí)，腦海里可能會(huì)浮現(xiàn) 棒，酷，簡潔，有趣 等形容詞，其實(shí)，我們存在一些 更充分的理由 使我們?cè)诼?lián)想起 箭頭函數(shù) 時(shí)不得不想到的
箭頭函數(shù)不會(huì)在函數(shù)體內(nèi)重新定義 this 的值，這使得在回調(diào)中的行為更容易預(yù)測，并且避免了 this 在回調(diào)中潛存的 bug
下面我們來看一個(gè) example
我們期望點(diǎn)擊按鈕，改變按鈕顏色，代碼如下
class BrokenButton extends React.Component {
render() {
return (
);
}
handleClick() {
this.setState({ backgroundColor: "red" });
}
}
render(
然而，當(dāng)我們點(diǎn)擊按鈕時(shí)，什么效果都沒有，為什么會(huì)這樣呢
其實(shí)，不是 handleClick 方法沒有起作用，因?yàn)?JavaScript 中壓根沒有方法， JavaScript 中只有函數(shù)，而函數(shù)中的 this 存在一些規(guī)則，正是這些規(guī)則，讓上面的 handleClick 中的 this 值變成了 null
你需要清楚明白的是： 你無法確定一個(gè)方法函數(shù)中 this 的指向，因?yàn)樗闹蹈瘮?shù)的調(diào)用方式有關(guān)
除非，你使用 箭頭函數(shù)，因?yàn)榧^函數(shù)中 this 的值是繼承自 外圍作用域
class Button extends React.Component {
render() {
return (
);
}
}
render(, document.getElementById("root"));
現(xiàn)在就對(duì)了，接下來，我們繼續(xù)
瀏覽器支持瀏覽器對(duì) 箭頭函數(shù) 的支持大概是 73%，因?yàn)槟壳埃?b>IE 并不支持。但如果你已經(jīng)意識(shí)到這一點(diǎn)，并且你還會(huì)代碼轉(zhuǎn)譯，這對(duì)你來說就不算什么問題
性能問題大家都發(fā)現(xiàn)了，箭頭函數(shù) 書寫起來是非常容易的，但書寫忒多的函數(shù)，也會(huì)造成一些問題
定義函數(shù)是昂貴的瀏覽器每執(zhí)行一次 =>，就需要?jiǎng)?chuàng)建一個(gè) 新的函數(shù)對(duì)象，這其實(shí)是一個(gè)比較 昂貴 的操作
當(dāng)然，如果你不是想構(gòu)建一個(gè) 性能超級(jí)無敵宇宙螺旋棒 的組件，渲染一個(gè) 非常長 的列表或 非常大 的表格，你也不會(huì)發(fā)現(xiàn)這是一個(gè) 問題
所以，如果你的組件只是在頁面中渲染個(gè)幾次，你也 沒必要忒擔(dān)心 性能這方面的問題
兩個(gè)相同的箭頭函數(shù)并不相等為了讓大家意識(shí)到這個(gè)問題，接下來，我們用 == 比較一下兩個(gè)相同的箭頭函數(shù)相不相等
const a = x => x,
b = x => x;
render(
Are a and b equal by ==?
{a == b ? "Yes!" : "No :("}
,
document.getElementById("root")
);
如果你在 render 中使用箭頭函數(shù)，那么你在每次調(diào)用 render 時(shí)都會(huì)去創(chuàng)建一個(gè)新的函數(shù)對(duì)象，此時(shí)，即使使用 PureComponent 和 shouldComponentUpdate 也起不到優(yōu)化作用
你可以在下面實(shí)例中看清這一點(diǎn)，其中，
import PropChangeCounter from "react-armory-prop-change-counter";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { email: "" };
}
render() {
return (
this.setState({ email: e.target.value })}
/>
this.setState({ email: e.target.value })}
/>
);
}
}
render(
只定義一次
如果你覺得 性能 對(duì)你的組件很重要，那么你肯定會(huì)想如果在組件中只定義箭頭函數(shù) 一次 該有多好
其中一種實(shí)現(xiàn)方式是在 constructor 中使用箭頭函數(shù)，當(dāng)然，對(duì)于復(fù)雜些的組價(jià)來說，這會(huì)變的很笨拙
如果你使用了 Babel 或 create-react-app 構(gòu)建你的應(yīng)用，你可以將箭頭函數(shù)設(shè)置為 class fields 或 arrow function methods
如下，你可以將 handleClick 重新定義為一個(gè) arrow function method，來修復(fù)第一個(gè) example 中的 bug
class Button extends React.Component {
render() {
return (
);
}
// 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é)
如果 環(huán)境支持 箭頭函數(shù)，那么鼓勵(lì)使用
盡量避免對(duì) React 組件 使用箭頭函數(shù)，它會(huì)使 調(diào)試 變的困難
如果有需要，可以在 render 中使用箭頭函數(shù)
為 性能 著想，避免在 render 中使用大量函數(shù)
原文鏈接：When should I use Arrow Functions? (James K Nelson)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87421.html
摘要：好的方案在構(gòu)造函數(shù)中仍然使用，現(xiàn)在我們只要繞過每次渲染都要生成新的函數(shù)的問題就可以了。我們可以通過只在構(gòu)造函數(shù)中綁定回調(diào)的上下問來解決這個(gè)問題，因?yàn)闃?gòu)造函數(shù)只會(huì)調(diào)用一次，而不是每次渲染都調(diào)用。 原文：Binding callbacks in React components 在組件中給事件綁定處理函數(shù)是很常見的，比如說每當(dāng)用戶點(diǎn)擊一個(gè)button的時(shí)候使用console.log打印一些...
摘要：在繼承的構(gòu)造函數(shù)中，我們必須如上面的例子那么調(diào)用一次方法，它表示構(gòu)造函數(shù)的繼承，與中利用繼承構(gòu)造函數(shù)是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實(shí)際開發(fā)中，ES6已經(jīng)非常普及了。掌握ES6的知識(shí)變成了一種必須。盡管我們?cè)谑褂脮r(shí)仍然需要經(jīng)過babel編譯。 ES6徹底改變了前端的編碼風(fēng)格，...
摘要：和類在開始時(shí)遇到類組件，只是需要有關(guān)類的基礎(chǔ)。畢竟，中的條件呈現(xiàn)僅再次顯示大多數(shù)是而不是特定的任何內(nèi)容。 在我的研討會(huì)期間，更多的材料是關(guān)于JavaScript而不是React。其中大部分歸結(jié)為JavaScript ES6以及功能和語法，但也包括三元運(yùn)算符，語言中的簡寫版本，此對(duì)象，JavaScript內(nèi)置函數(shù)（map，reduce，filter）或更常識(shí)性的概念，如：可組合性，可重用...
摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對(duì)于新特性，我們可以通過使用，也可以通過語法轉(zhuǎn)化來達(dá)到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復(fù)雜的歷史和時(shí)代的原因，并不加以累述。而解決兼容性問題的方法在以前只...
閱讀 1816·2021-09-27 14:02
閱讀 3565·2021-09-27 13:36
閱讀 1089·2019-08-30 12:46
閱讀 1891·2019-08-30 10:51
閱讀 3627·2019-08-29 17:02
閱讀 1009·2019-08-29 16:38
閱讀 1892·2019-08-29 16:37
閱讀 3145·2019-08-26 10:32
