Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 4
50 câu trắc nghiệm kèm lời giải của môn FER202 - Phát triển web Front-End với React, xếp đúng thứ tự trong đề. Trang 3/3 — câu 41–50.
Danh sách câu hỏi
50/50 câuHết danh sách
41What is the main purpose of Redux Toolkit?4 lựa chọn
ATo replace React Router
BTo add class-based components to Redux
CTo simplify Redux setup and reduce boilerplate code
DTo provide built-in CSS styling for Redux
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "To simplify Redux setup and reduce boilerplate code". Redux Toolkit (RTK) là bộ công cụ chính thức được khuyến nghị để viết Redux: configureStore dựng store kèm sẵn thunk và DevTools, createSlice sinh cùng lúc reducer và action creator từ một đối tượng, dùng Immer để viết lệnh trông như sửa trực tiếp state mà kết quả vẫn bất biến, createAsyncThunk lo các trạng thái khi gọi API; nhờ vậy giảm hẳn mã lặp (boilerplate) như hằng action type và khối switch-case. "To replace React Router" sai vì định tuyến là việc của React Router, RTK không liên quan. "To add class-based components to Redux" sai, RTK không thêm loại component nào, và cách dùng hiện nay là function component với useSelector, useDispatch. "To provide built-in CSS styling for Redux" sai vì Redux chỉ quản lý state, không có phần giao diện để định kiểu.
AIt is mainly designed for handling backend logic and database management
BReact helps build interactive user interfaces, especially for SPAs.
CReact primarily functions as a server-side rendering engine for web applications.
DIt is mainly a mobile development framework and not suitable for web applications.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "React helps build interactive user interfaces, especially for SPAs.". React là thư viện JavaScript để xây dựng giao diện người dùng từ các component, mỗi component mô tả giao diện theo state và React tự cập nhật DOM khi state đổi; mô hình này rất hợp với ứng dụng một trang (single-page application, SPA), nơi trang không tải lại mà giao diện thay đổi liên tục theo thao tác người dùng. Phương án "It is mainly designed for handling backend logic and database management" sai vì React chạy ở tầng giao diện, còn logic máy chủ và cơ sở dữ liệu thuộc backend như Node.js với Express. Phương án "React primarily functions as a server-side rendering engine for web applications." nhầm khả năng phụ với vai trò chính: React có thể render phía máy chủ qua framework như Next.js, nhưng mục đích chính vẫn là dựng giao diện tương tác. Phương án "It is mainly a mobile development framework and not suitable for web applications." đảo ngược sự thật: React ra đời cho web, còn mobile là React Native, một dự án riêng.
AThe render() method defines the component's structure, while the commit() method handles side effects.
BThe render() method handles events, while the commit() method defines the component's structure.
CThe render() method is called before the component is mounted, while the commit() method is called after the component is mounted.
DThere is no commit() method in React.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "There is no commit() method in React.". Theo tài liệu react.dev, render và commit là hai GIAI ĐOẠN trong cách React cập nhật màn hình: ở giai đoạn render, React gọi component để tính ra giao diện mới và so với lần trước; ở giai đoạn commit, React áp các thay đổi đó vào DOM, sau đó mới chạy effect. Commit là tên một giai đoạn nội bộ, React không cung cấp phương thức commit() nào để component viết ra hay gọi. "The render() method defines the component's structure, while the commit() method handles side effects." là phương án mà đề in chấm làm đáp án và cũng dễ bị chọn nhất: vế render đúng, và nếu hiểu commit là giai đoạn thì ý cập nhật DOM rồi chạy effect cũng gần đúng, nhưng câu này gọi commit là một phương thức như render(), mà phương thức đó không tồn tại, nên đáp án chốt là phát biểu phủ nhận. "The render() method handles events, while the commit() method defines the component's structure." sai vì render không xử lý sự kiện, và cũng dựa trên phương thức commit không có thật. "The render() method is called before the component is mounted, while the commit() method is called after the component is mounted." sai vì render được gọi cả ở lần mount lẫn mỗi lần cập nhật, và ở phần sau vẫn là phương thức commit không có thật.
A.html
B.css
C.js or .jsx
D.php
Lời giải
Mở trang câu hỏi này →Đáp án đúng: ".js or .jsx". Component React là một hàm (hoặc lớp) JavaScript trả về JSX, nên tệp chứa nó mang đuôi .js hoặc .jsx; đuôi .jsx báo rõ cho trình soạn thảo và công cụ build như Vite, Babel rằng tệp có cú pháp JSX cần biên dịch, còn dự án TypeScript dùng .ts hoặc .tsx tương ứng. ".html" là tài liệu HTML tĩnh; ứng dụng React thường chỉ có một index.html làm khung với thẻ div gốc để React gắn vào, component không viết ở đó. ".css" là tệp định kiểu, có thể import vào component nhưng không chứa logic của component. ".php" là mã PHP chạy phía máy chủ, không liên quan tới cách viết component React.
45How can you use a fragment in JSX?4 lựa chọn
ABy wrapping the JSX elements with <div> tags
BBy using the shorthand syntax <>...</> or <React.Fragment>...</React.Fragment>
CBy creating a separate component for each element
DBy using the fragment() function
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "By using the shorthand syntax <>...</> or <React.Fragment>...</React.Fragment> ". Một component chỉ được trả về một phần tử gốc, nên khi cần trả về nhiều phần tử anh em ta bọc chúng bằng Fragment; Fragment gom nhóm trong JSX nhưng không sinh thêm nút nào trong DOM. Cú pháp rút gọn là cặp thẻ rỗng, còn dạng đầy đủ React.Fragment cần dùng khi phải gắn key, chẳng hạn trong vòng map. "By wrapping the JSX elements with <div> tags" sai vì bọc bằng div cũng thoả yêu cầu một gốc nhưng thêm một nút DOM thừa, có thể phá bố cục như bảng hay flex, và đó chính là điều Fragment sinh ra để tránh. "By creating a separate component for each element" sai vì tách component không giải quyết việc gom nhiều phần tử về một gốc. "By using the fragment() function" sai vì React không có hàm fragment nào như vậy; Fragment là một component dùng dưới dạng thẻ.
46After fetching data from an API, what is the purpose of “response.json()” in the Fetch API?4 lựa chọn
AIt converts the response to an XML format.
BIt converts the response to a JavaScript object from JSON format.
CIt directly displays the response data on the page.
DIt validates the JSON structure.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It converts the response to a JavaScript object from JSON format.". Hàm fetch trả về một đối tượng Response mà phần thân còn là luồng dữ liệu thô; gọi response.json() đọc hết phần thân rồi phân tích chuỗi JSON thành giá trị JavaScript (đối tượng hoặc mảng), và vì việc đọc là bất đồng bộ nên nó trả về một Promise, thường viết const data = await response.json() rồi đưa data vào state. Phương án "It converts the response to an XML format." sai vì Fetch API không có hàm đổi sang XML; muốn đọc XML thì lấy response.text() rồi tự phân tích bằng DOMParser. Phương án "It directly displays the response data on the page." sai vì json() chỉ trả dữ liệu, hiển thị là việc của component khi render state. Phương án "It validates the JSON structure." chỉ đúng ở một hệ quả phụ: JSON hỏng thì Promise bị reject với lỗi cú pháp, nhưng mục đích của hàm là chuyển đổi dữ liệu chứ không phải kiểm tra cấu trúc.
AIt immediately executes the next function
BIt pauses the execution until the Promise resolves or rejects
CIt logs the result to the console
DIt converts a string into a Promise
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "It pauses the execution until the Promise resolves or rejects". Bên trong hàm async, await tạm dừng phần còn lại của chính hàm đó cho tới khi Promise đứng sau nó ổn định: fulfilled thì biểu thức await trả về giá trị, rejected thì ném lỗi để try/catch bắt; trong lúc chờ, luồng chính không bị chặn mà vẫn xử lý sự kiện và việc khác. "It immediately executes the next function" ngược với await, chạy tiếp ngay mà không chờ là hành vi khi không dùng await. "It logs the result to the console" sai, ghi ra console là việc của console.log, await không in gì. "It converts a string into a Promise" sai về mục đích: await một giá trị không phải Promise thì nó chỉ bọc giá trị đó bằng Promise.resolve rồi trả lại đúng giá trị ấy, không nhằm chuyển chuỗi thành Promise.
48What mechanism does React Router use to pass dynamic data (like an id) from the URL to a component?4 lựa chọn
AQuery parameters, accessed via location.search.
BState variables, declared with useState()
CRoute parameters, marked by a colon (e.g., :id) in the path, which are then passed to the component.
DContext API, provided globally to all components
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "Route parameters, marked by a colon (e.g., :id) in the path, which are then passed to the component.". React Router dùng tham số tuyến (route parameter): trong path, đoạn có dấu hai chấm như /products/:id là chỗ trống động, URL /products/7 khớp tuyến đó và giá trị 7 được đưa vào component, đọc qua useParams() ở v6. "Query parameters, accessed via location.search." là tham số truy vấn sau dấu hỏi như ?id=7, đọc qua location.search hoặc useSearchParams; nó vẫn chở được dữ liệu nhưng không phải cơ chế tham số động khai báo trong path mà câu hỏi nói tới. "State variables, declared with useState()" sai vì useState tạo state nội bộ của component, không lấy giá trị từ URL. "Context API, provided globally to all components" sai vì Context API chia sẻ dữ liệu qua cây component, không đọc gì từ URL.
49What is event pooling in React?4 lựa chọn
AThe process of reusing event objects for performance optimization.
BThe process of creating multiple event objects for each event.
CThe process of cleaning up event objects after they are used.
DThe process of handling events in a pool of event handlers.
Lời giải
Mở trang câu hỏi này →Đáp án đúng: "The process of reusing event objects for performance optimization.". Ở React 16 trở về trước, SyntheticEvent được lấy từ một vùng chứa (pool) dùng chung: sau khi handler chạy xong, React xoá sạch các thuộc tính của đối tượng sự kiện và đưa nó về pool để dùng lại cho sự kiện kế tiếp, nhằm bớt tạo rác cho bộ thu gom bộ nhớ. Vì vậy đọc e.target trong setTimeout hay sau await sẽ ra null, trừ khi gọi e.persist(). Từ React 17 cơ chế này đã bị bỏ vì lợi ích hiệu năng không còn đáng kể. "The process of creating multiple event objects for each event." ngược với ý tưởng tái sử dụng. "The process of cleaning up event objects after they are used." chỉ là một bước bên trong pooling, xoá thuộc tính để dùng lại, chứ không phải toàn bộ khái niệm. "The process of handling events in a pool of event handlers." sai vì pool chứa đối tượng sự kiện, không chứa handler.
50What is the correct way to lazily load a component called “Dashboard” using “React.lazy()”?4 lựa chọn
Aconst Dashboard = lazy('./Dashboard');
Bconst Dashboard = React.lazy(import('./Dashboard'));
Cconst Dashboard = React.lazy(() => import('./Dashboard'));
Dconst Dashboard = lazy(() => require('./Dashboard'));
Lời giải
Mở trang câu hỏi này →Đá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().