React 性能优化十大总结

文章预览

击上方  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  o ………………………………