React.lazy() 和 React.memo() 都是用于優化 React 應用程序性能的工具,但它們的用途和行為有所不同。
React.lazy() 用于實現代碼分割,將較大的代碼塊延遲加載,直到用戶實際需要訪問該部分代碼。這可以減少應用程序的初始加載時間,并提高性能。React.lazy() 接受一個函數作為參數,該函數應返回一個動態導入的模塊,該模塊包含要延遲加載的組件。
示例代碼:
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() 用于優化函數組件的性能,避免不必要的重新渲染。當一個組件接收的 props 沒有發生變化時,React.memo() 會阻止該組件重新渲染。這可以提高性能,特別是在處理大量數據或復雜組件時。React.memo() 接受一個函數作為參數,該函數應返回要優化的組件。
示例代碼:
import React, { memo } from 'react';
const MyComponent = (props) => {
// 渲染組件
};
export default memo(MyComponent);
因此,React.lazy() 和 React.memo() 可以結合使用,以實現更高效的代碼分割和優化組件渲染。