Khái niệm

Lazy load là một kỹ thuật trong lập trình web cho phép chúng ta chỉ tải các tài nguyên khi chúng cần thiết. Thay vì tải toàn bộ nội dung một lần, chúng ta chỉ tải nội dung khi nó được hiển thị trên màn hình hoặc khi người dùng thực hiện một hành động cụ thể.

Trong ReactJS, chúng ta có thể sử dụng kỹ thuật lazy load để tải các thành phần hoặc hình ảnh chỉ khi nó được cần thiết trong ứng dụng.

Cách sử dụng

ReactJS cung cấp một tính năng gọi là React.lazy để hỗ trợ lazy loading các thành phần. Đây là một ví dụ về cách sử dụng React.lazy:

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

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

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

export default App;

Trong ví dụ trên, chúng ta sử dụng React.lazy để lazy load một thành phần được import từ module './LazyComponent'. Thành phần này sẽ chỉ được tải khi nó được hiển thị trên màn hình.

Chúng ta sử dụng <Suspense> để xác định một fallback UI (giao diện dự phòng) trong trường hợp thành phần chưa được tải xong. Trong ví dụ này, fallback UI là một phần tử <div>Loading...</div>.

Lazy load hình ảnh

Lazy load cũng có thể được áp dụng cho việc tải hình ảnh trong ReactJS. Có nhiều thư viện hỗ trợ việc này, ví dụ như react-lazyload hoặc react-lazy-load-image-component. Dưới đây là một ví dụ sử dụng react-lazy-load-image-component:

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

function App() {
  return (
    <div>
      <LazyLoadImage
        src="path/to/image.jpg"
        alt="Hình ảnh"
        effect="blur"
      />
    </div>
  );
}

export default App;

Trong ví dụ trên, chúng ta sử dụng <LazyLoadImage> từ thư viện react-lazy-load-image-component để tải hình ảnh. Chúng ta chỉ cần cung cấp src (đường dẫn đến hình ảnh) và alt (văn bản thay thế) cho thành phần.

Chúng ta cũng có thể áp dụng các hiệu ứng như “blur” hoặc “opacity” khi hình ảnh đang được tải.