Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập thi lại số 2
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 2/3 — câu 21–40.
Danh sách câu hỏi
Đáp án đúng: "case 'increment':
return {
count: state.count + 1
};". Reducer là hàm thuần nhận state hiện tại cùng action và trả về state mới; trong khối switch theo action.type, mỗi case trả về một đối tượng mới chứ không sửa state cũ, nên với state dạng đối tượng có khóa count, cách viết đúng là tạo đối tượng có thuộc tính count bằng state.count cộng 1. Phương án "case 'increment':
return {
count + 1
};" có ngoặc nhọn nhưng thiếu tên khóa, count + 1 không phải cặp khóa và giá trị nên là lỗi cú pháp, đồng thời count chưa được khai báo trong reducer. Phương án "case 'increment':
return {
count= count + 1
};" dùng dấu bằng trong đối tượng, sai cú pháp vì cặp khóa và giá trị phải dùng dấu hai chấm, và ý đồ là gán thay vì trả về giá trị mới. Phương án "case 'increment':
return {
state.count + 1
};" cũng thiếu tên khóa, biểu thức state.count + 1 không thể đứng một mình trong đối tượng nên lỗi cú pháp.
<MyContext value={someValue}>
<Component />
</MyContext><MyContext.Provider value={someValue}>
<Component />
</MyContext.Provider><MyContext.Consumer value={someValue}>
<Component />
</MyContext.Consumer><MyContext.Provider>
<Component value={someValue} />
</MyContext.Provider>Đáp án đúng: "
<MyContext.Provider value={
someValue
}
> <Component /> </MyContext.Provider>". Provider của context nhận giá trị qua prop value, và mọi component nằm bên trong nó đọc được giá trị đó bằng useContext(MyContext) hoặc Consumer. "
<MyContext value={
someValue
}
> <Component /> </MyContext>" chỉ chạy được từ React 19, khi bản thân đối tượng context được phép dùng làm Provider; với React 18 trở về trước, cách viết chuẩn và chắc chắn vẫn là MyContext.Provider. Phương án chứa "
<MyContext.Consumer value={
someValue
}
>" dùng Consumer, vốn để đọc giá trị qua một hàm con, không nhận prop value nên không cung cấp được gì. Phương án chứa "
<Component value={
someValue
}
/>" để Provider thiếu value nên các component con đọc ra undefined, còn someValue chỉ thành một prop thường của Component, không đi vào context.
componentDidMountcomponentWillUnmountcomponentDidUpdateshouldComponentUpdate<button onClick={
______
}
>Click</button>const [count, setCount] = useState(0);
function increment() {
setCount(count + 1);
}Đáp án đúng: "The main branch has new-file.js added.". Lần theo từng lệnh: git init tạo kho rỗng, nhánh mặc định ở đây được hiểu là main (Git cũ mặc định tên master); git add . rồi commit tạo commit đầu tiên; git branch new-feature tạo nhánh mới tại commit đó và git checkout new-feature chuyển sang nhánh này; git add new-file.js rồi commit thêm một commit chứa new-file.js chỉ trên new-feature; git checkout main quay về main, lúc này chưa có tệp đó; git merge new-feature thấy main không có commit riêng nào nên tiến thẳng (fast-forward) main lên commit của new-feature. Kết quả cuối là main chứa new-file.js. "The repository has a new branch called new-feature with new-file.js added." đúng ở bước giữa và nhánh đó vẫn còn, nhưng không mô tả kết quả cuối của lệnh merge. "The new-feature branch is merged into main without new-file.js." tự mâu thuẫn vì merge đưa đúng commit thêm tệp vào main. "The repository remains unchanged." sai vì đã có hai commit và một nhánh mới.
import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function App() { return ( <Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense> ); }
export default App;import React, { Suspense } from 'react';
const MyComponent = import('./MyComponent');
function App() { return ( <Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense> ); }
export default App;import React, { lazy } from 'react';
const MyComponent = lazy('./MyComponent');
function App() { return ( <div fallback={<div>Loading...</div>}> <MyComponent /> </div> ); }
export default App;import React from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() { return ( <React.Suspense> <MyComponent /> </React.Suspense> ); }
export default App;Đáp án đúng: "import React, { lazy, Suspense } from 'react'; const MyComponent = lazy(() => import('./MyComponent')); function App() {
return ( <Suspense fallback={
<div>Loading...</div>
}> <MyComponent /> </Suspense> ); } export default App;". Hàm lazy nhận một hàm trả về Promise từ import() động, React chỉ tải chunk của MyComponent khi nó render lần đầu; trong lúc chờ, Suspense bao ngoài hiển thị phần tử truyền qua prop fallback, ở đây là dòng Loading..., tải xong mới thay bằng component thật. Phương án gán "const MyComponent = import('./MyComponent');" bỏ lazy, nên MyComponent là một Promise chứ không phải component, dùng làm thẻ JSX sẽ lỗi. Phương án viết "lazy('./MyComponent')" truyền chuỗi đường dẫn thay cho hàm gọi import(), lazy không tự tải được, đồng thời "<div fallback=" chỉ là thuộc tính vô nghĩa trên thẻ div, không có Suspense nên không có giao diện chờ. Phương án dùng "
<React.Suspense>
<MyComponent />" nạp lười đúng nhưng thiếu prop fallback, nên trong lúc tải không hiện gì, trái với yêu cầu hiển thị fallback.
Đáp án đúng: "By wrapping it in {}". Trong JSX, cặp ngoặc nhọn là cửa sổ để quay về JavaScript: bất kỳ biểu thức nào đặt trong đó, như một biến, phép tính, lời gọi hàm hay toán tử ba ngôi, đều được tính và chèn kết quả vào giao diện, ví dụ {user.name} hay {count + 1}; ngoặc nhọn dùng được cả trong nội dung thẻ lẫn làm giá trị thuộc tính. "By adding js: before it" sai vì JSX không có tiền tố js nào, viết vậy chỉ ra chữ thường trên màn hình. "By using () only" sai vì ngoặc tròn trong JSX chỉ dùng để nhóm, chẳng hạn bọc khối JSX nhiều dòng sau return, chúng không biến chữ bên trong thành biểu thức JavaScript. "By
using {
{
}
}" sai vì cặp ngoặc đôi không phải cú pháp riêng: ngoặc ngoài là ngoặc nhúng biểu thức, ngoặc trong là một đối tượng JavaScript, như khi viết style={{ color: 'red' }}, nên nó chỉ là một trường hợp của cách dùng {}.
Đáp án đúng: "
<Route path="/users/:id" component={
UserDetail
}
/>". Tham số route được khai báo bằng một đoạn động có dấu hai chấm trong path: /users/:id khớp với /users/5, /users/42 và giá trị sau dấu gạch chéo được gán vào tham số id, component đích đọc lại bằng useParams. Cần nói rõ prop component là cách viết của React Router v5, sang v6 phải viết element kèm thẻ UserDetail, nhưng ý khai báo tham số :id vẫn y nguyên và đây là đoạn mã duy nhất xử lý tham số route. "<Link to="/users">Users</Link> " chỉ tạo liên kết tới đường dẫn tĩnh /users, không có tham số nào. "import { BrowserRouter as Router, Route } from "react-router-dom";" chỉ là lệnh nhập BrowserRouter và Route, chưa khai báo route hay tham số. "import { Link, Route } from "react-router-dom";" cũng chỉ nhập Link và Route, không định nghĩa đường dẫn nào.
navigate('');navigate('home');navigate('/');navigate('root');