react项目性能优化方向

react按需加载：

• 按需加载是依靠延迟计算思想来优化应用响应性能。

• react16之后实现懒加载可以使用react.lazy方法，之前是使用react-loadable等一些库

• react.lazy本质是通过代码拆分的方式，让部分非核心组件延迟加载。

• react.lazy配合suspense组件一起使用。

  （suspense用来懒加载提供过度效果的。在需要懒加载组件的外面使用Suspense标签，并在fallback中声明懒加载组件在加载完成前做的事，即可优化整个页面的交互）

  const OtherComponent = React.lazy(() => import('./OtherComponent'));
  
  function MyComponent() {
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
        </Suspense>
      </div>
    );
  }
  

react性能优化点

• 利用key维持组件结构稳定性，在实际比对节点的更新过程中带有唯一性的ke y能够让react更快的定位到变更的节点，从而做到最小化的更新。 （diff原理）
• 数据比对，让组件避免在非必要的情况下重新渲染，react对于状态更新的比较方式默认是采用<浅>比较的。
• 按需加载，提高应用的用户体验。
• 对于类class组件，可使用shouldComponentUpdate方法来优化组件性能。函数functional组件没有这个生命周期。