資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時裝設計
法律研究React.js 功能元件中的 memo 函式
作為生命週期方法，我們在基於類的元件中擁有 shouldComponentUpdate。透過比較屬性（上一個和下一個）並有條件地執行渲染，可以使用此方法來實現效能最佳化。
我們也有 React.PureComponent，它可以對狀態和屬性進行淺層比較。但在函式元件中，我們沒有這樣的方法。
現在，React 提供了一種 memo 方法，該方法將對功能元件執行相同的功能。
const functionalComponent = React.memo(function functionalComponent(props) {
/* render using props */
});我們在 memo 方法中包裝了元件。直到屬性相同，memo 方法才會記住結果。一旦屬性更改，它將重新渲染函式。這是 memo 的預設行為，但我們還可以根據我們的要求提供我們自己的自定義方法來比較屬性。
functionfunctionalComponent(props){
/* render using props */
}
functionareEqual(prevProps, nextProps){
/*
return true if preProps and nextProps are equal else false
*/
}
exportdefault React.memo(functionalComponent, areEqual);請注意，memo 方法僅對屬性進行淺層比較，如果屬性包含巢狀資料結構，則進行深度比較。如果我們需要深度比較，我們可以透過在 memo 函式中為其新增自定義比較函式來實現。
傳遞給 memo 方法的第二個引數決定何時重新渲染函式。在 are Equal 中，我們可以新增比較屬性的自定義邏輯。
這純粹是為了效能最佳化而新增的，不應使用它來阻止渲染方法。
React.memo 實現了為高階元件。
更新於：2019 年 9 月 4 日
311 次瀏覽
廣告