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