react lazyLoad與React.memo有何區(qū)別

React.lazy() 和 React.memo() 都是用于優(yōu)化 React 應(yīng)用程序性能的工具，但它們的用途和行為有所不同。

React.lazy() 用于實(shí)現(xiàn)代碼分割，將較大的代碼塊延遲加載，直到用戶實(shí)際需要訪問該部分代碼。這可以減少應(yīng)用程序的初始加載時(shí)間，并提高性能。React.lazy() 接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)應(yīng)返回一個(gè)動(dòng)態(tài)導(dǎo)入的模塊，該模塊包含要延遲加載的組件。

示例代碼：

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

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

React.memo() 用于優(yōu)化函數(shù)組件的性能，避免不必要的重新渲染。當(dāng)一個(gè)組件接收的 props 沒有發(fā)生變化時(shí)，React.memo() 會(huì)阻止該組件重新渲染。這可以提高性能，特別是在處理大量數(shù)據(jù)或復(fù)雜組件時(shí)。React.memo() 接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)應(yīng)返回要優(yōu)化的組件。

示例代碼：

import React, { memo } from 'react';

const MyComponent = (props) => {
  // 渲染組件
};

export default memo(MyComponent);

因此，React.lazy() 和 React.memo() 可以結(jié)合使用，以實(shí)現(xiàn)更高效的代碼分割和優(yōu)化組件渲染。