React.memo组件性能优化技巧

React.memo是React 16.6新增的一个函数，它可以帮助我们更好地优化性能。它可以接受一个函数组件，并返回一个与其功能完全相同的新组件，但它可以跟踪组件的 props，并且只有在 props 发生变化时才重新渲染组件。

使用方法

使用React.memo有两种方式，第一种是使用它包裹函数组件：

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用props渲染 */
});

第二种是使用它包裹类组件：

class MyComponent extends React.Component {
  /* 使用props渲染 */
}
export default React.memo(MyComponent);

React.memo还接受第二个参数，它是一个函数，用于比较新的props和旧的props，以决定是否重新渲染组件。如果不传入第二个参数，则默认使用Object.is来比较props。

const areEqual = (prevProps, nextProps) => {
  /*
    return true if passing nextProps to render would return
    the same result as passing prevProps to render,
    otherwise return false
  */
};

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用props渲染 */
}, areEqual);

优缺点

React.memo的优势在于，它可以帮助我们减少不必要的渲染，提高性能。它的缺点是，它只能用于函数组件，不能用于类组件。

React.memo是一个非常有用的函数，它可以帮助我们更好地优化性能。它可以接受一个函数组件，并返回一个与其功能完全相同的新组件，但它可以跟踪组件的 props，并且只有在 props 发生变化时才重新渲染组件。使用它可以减少不必要的渲染，提高性能。