成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React.memo

Meils / 1213人閱讀

摘要：介紹之前，先了解一下和。不同是沒有實現(xiàn)，而通過和的淺比較實現(xiàn)了。如果組件的和相同時，的內容也一致，那么就可以使用了這樣可以提高組件的性能。例如當和中有復雜數(shù)據(jù)結果時，不好使用。示例這種方式依然是一種對象的淺比較，有復雜對象時無法。

介紹React.memo之前，先了解一下React.Component和React.PureComponent。

React.Component

React.Component是基于ES6 class的React組件。

React允許定義一個class或者function作為組件，那么定義一個組件類，就需要繼承React.Component.

例如：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

注意：繼承React.Component的React組件類中，render()為必須方法，其他都為可選。

React.PureComponent

React.PureComponent 和 React.Component類似，都是定義一個組件類。不同是React.Component沒有實現(xiàn)shouldComponentUpdate()，而 React.PureComponent通過props和state的淺比較實現(xiàn)了。

如果組件的props和state相同時，render的內容也一致，那么就可以使用React.PureComponent了,這樣可以提高組件的性能。

例如：

class Welcome extends React.PureComponent {
  render() {
    return 
Hello, {this.props.name}
;
  }
}
當props和state中有復雜數(shù)據(jù)結果時，不好使用PureComponent。
React.memo

React.memo是一個高階組件，類似于React.PureComponent，不同于React.memo是function組件，React.PureComponent是class組件。

示例：

const MyComponent = React.memo(props => {
  /* render using props */
  return (

  );
});

這種方式依然是一種對象的淺比較，有復雜對象時無法render。在React.memo中可以自定義其比較方法的實現(xiàn)。

例如：

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);
該方法在V16.6.0才支持

推薦閱讀《React 手稿》

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/99065.html

相關文章

  • 使用React.memo()來優(yōu)化函數(shù)組件的性能

    摘要：函數(shù)組件上面我們探討了如何使用和的方法優(yōu)化類組件的性能。它的作用和類似，是用來控制函數(shù)組件的重新渲染的。其實就是函數(shù)組件的。 原文鏈接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 譯者: 進擊的大蔥 推薦理由: 本文講述了開發(fā)React應用時如...

    BetaRabbit 評論0 收藏0

  • React16時代，該用什么姿勢寫 React ?

    摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會警告。在更新之前調用，此時已更新返回值作為的第個參數(shù)一般用于獲取之前的數(shù)據(jù)語法是從的返回值，默認是的使用場景一般是獲取組建更新之前的滾動條位置。 React16 后的各功能點是多個版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對于...

    Reducto 評論0 收藏0

  • React源碼解析之React.createRef()/forwardRef()

    摘要：一作用獲取目標的實例使用源碼可修改的不可變的對象沒見過這種寫法初始化對象，屬性初始值為解析源碼比較簡單，就是返回了帶有屬性的二作用從父組件中獲取子組件是的實例使用是沒有實例的，因為它是，所以沒有，所以不能通過來拿到實例將的傳給子組件，并綁定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

    aisuhua 評論0 收藏0

  • React 源碼漂流（一）之 起航

    摘要：在前端開發(fā)過程中，源碼解讀是必不可少的一個環(huán)節(jié)，我們直接進入主題，注意當前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結合一起使用下是，原生環(huán)境下是。 在前端開發(fā)過程中，源碼解讀是必不可少的一個環(huán)節(jié)，我們直接進入主題，注意當前 React 版本號 16.8.6。 注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結合 React...

    Mr_zhang 評論0 收藏0

  • React 新特性講解及實例(一)

    摘要：接收一個屬性，這個組件會讓后代組件統(tǒng)一提供這個變量值。因此對于同一個對象而言，一定是后代元素。解決方法就是把內聯(lián)函數(shù)提取出來，如下講了這么多，我們還沒有講到其實我們已經講完了的工作原理了。 本節(jié)主要講解以下幾個新的特性： Context ContextType lazy Suspense 錯誤邊界（Error boundaries） memo 想閱讀更多優(yōu)質文章請猛戳GitHub博...

    Betta 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<