React 性能优化十大总结

文章预览

本文转载于稀土掘金技术社区——敲代码的彭于晏 前言 性能优化是软件开发中永远不会过时的话题，本篇将介绍在React编码过程中需要注意的性能优化点。鉴于图片懒加载、虚拟滚动列表等已成为广为人知的通用性能优化手段，本文将不再赘述这些内容。 1. memo memo允许组件在 props 没有改变的情况下跳过重新渲染 默认通过Object.is比较每个prop，可通过第二个参数，传入自定义函数来控制对比过程 const  Chart = memo( function   Chart ( { dataPoints } )  {    // ... }, arePropsEqual); function   arePropsEqual ( oldProps, newProps )  {    return  (     oldProps.dataPoints.length === newProps.dataPoints.length  & &     oldProps.dataPoints.every( ( oldPoint, index ) =>  {        const  newPoint = newProps.dataPoints[index];        return  oldPoint.x === newPoint.x  & &  oldPoint.y === newPoint.y;     })   ); ………………………………