What is the correct way to lazily load a component called “Dashboard” using “React.lazy()”?

4 phương ánCó giải thích

Các phương án trả lời

Chọn một phương án
Lời giảiChọn phương án để mở

Đáp án đúng: "const Dashboard = React.lazy(() => import('./Dashboard')); ". React.lazy nhận một HÀM không tham số trả về Promise, mà import() động chính là Promise resolve ra module có export default là component; React chỉ gọi hàm này khi Dashboard render lần đầu, và cần bọc Dashboard trong Suspense để có giao diện chờ. "const Dashboard = lazy('./Dashboard');" truyền thẳng chuỗi đường dẫn thay cho hàm, lazy không biết tải gì và báo lỗi khi render. "const Dashboard = React.lazy(import('./Dashboard')); " gọi import() ngay lúc khai báo rồi truyền Promise thay cho hàm, mất tính lười và React cũng báo lỗi vì đối số không phải hàm. "const Dashboard = lazy(() => require('./Dashboard'));" sai vì require nạp module đồng bộ và trả về chính module chứ không phải Promise như lazy cần; require là cú pháp CommonJS nên cũng không tạo chunk tách riêng như import().

Cùng phần 7

Xuất hiện trong 1 bộ đề