React.memo

Meils 發布于2019-08-23 12:52 / 1210人閱讀

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

介紹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沒有實現shouldComponentUpdate()，而 React.PureComponent通過props和state的淺比較實現了。

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

例如：

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

當props和state中有復雜數據結果時，不好使用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中可以自定義其比較方法的實現。

例如：

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