react lazy, suspense, memo_react.lazy有啥用-优快云博客

本文链接：https://blog.youkuaiyun.com/fortunegrant/article/details/103435414

本文深入探讨React中lazy和memo的功能与应用。lazy实现组件的懒加载，通过代码分割提高加载效率，配合Suspense组件在加载过程中显示加载提示。memo用于函数式组件的性能优化，避免不必要的重新渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react lazy其实就是懒加载，比如你的父组件中加载了一个子组件，你没有使用react.lazy的话，他会直接去加载父组件和子组件中的代码（父+子.js），如果你使用了react.lazy在你加载父组件的时候（父.js），子组件将不会代码一起加载进去，而是当你需要渲染子组件的时候他的代码才会去加载（子.js），其实就是一个代码分割的作用

然后suspense其实也是搭配react.lazy一起使用的，fallback属性接受任何在组件加载过程中你想展示的 React 元素

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

suspense可以在你加载子组件代码时来一个显示，就是fallback里面的内容

参考 https://www.jianshu.com/p/61d6920c9e8f

react.memo

其实就是针对函数式组件的性能优化

const memo = (props)  => React.memo(Mycomponent, (prevProps, nextProps) => 
  prevProps.name === nextProps.name
)

第一个参数Mycomponent是函数式组件，第二个参数是判断Mycomponent是否根据当前传入的props有没有改变的回调函数，返回true则props没有发生改变，所以不用rerender