React性能优化的一些技巧

在阅读源码和文档的过程中，我会把和React性能优化有关的技巧和api记录在这里

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo 是一个higher order component. 它和React.PureComponent 很相似，但是是为无状态组件(function)服务的。

如果你的无状态组件在相同属性的情况下渲染结果是一样的，你就可以用React.memo去包裹它来缓存渲染结果，达到提升性能的目的。这意味着React不会去重新计算，而采用上次的渲染结果。

默认情况下，它只会浅比较属性的复杂的对象，如果你想自定义比较函数，你可以传递一个函数作为第二个参数。

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

Note

不同于Component类中的shouldComponentUpdate()方法, 如果希望重新渲染应该返回false，如果想要阻止渲染，应该返回true.