Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ 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 đề.
Danh sách câu hỏi
Đáp án đúng: "<Suspense> ". React.lazy cho phép tải một component theo kiểu động, tách nó thành một chunk riêng chỉ được tải khi cần; trong lúc chunk đang tải, component lazy tạm "treo" (suspend), và component Suspense bao ngoài sẽ hiển thị giao diện thay thế đặt trong thuộc tính fallback, chẳng hạn chữ đang tải hoặc vòng quay, cho tới khi mã tải xong. "<ErrorBoundary> " sai vì error boundary là component tự viết để bắt lỗi khi render, kể cả khi tải chunk thất bại; nó thường được dùng kèm nhưng xử lý trạng thái lỗi chứ không phải trạng thái đang tải. "<LoadingComponent> " sai vì React không có component dựng sẵn nào tên như vậy; đó chỉ là tên một component tự đặt mà ta có thể truyền vào fallback. "<Provider> " sai vì Provider của Context hay của react-redux dùng để cung cấp dữ liệu dùng chung cho cây component, không liên quan đến việc tải mã.
<Suspense loader={<div>Loading...</div>}>
<LazyComponent />
</Suspense><Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense><Await fallback={<div>Loading...</div>}>
<LazyComponent />
</Await><Loading fallback={<div>Loading...</div>}>
<LazyComponent />
</Loading>Đáp án đúng: "<Suspense fallback={ <div>Loading...</div> }> <LazyComponent /> </Suspense>". Component nạp lười bằng React.lazy phải nằm trong ranh giới Suspense; trong lúc tệp mã của nó còn đang tải, React hiển thị thứ được truyền qua prop fallback (ở đây là khối chữ Loading...), tải xong thì thay bằng LazyComponent. Phương án chứa "<Suspense loader=" sai vì Suspense không có prop loader, React bỏ qua nó, nên trong lúc chờ không có giao diện chờ nào được chỉ định. Phương án chứa "<Await fallback=" nhầm sang component Await của React Router, dùng để chờ một promise trả về từ loader; nó không bọc component lazy và cũng không nhận prop fallback. Phương án chứa "<Loading fallback=" dùng một component không có sẵn trong React; dù tự định nghĩa component Loading, nó cũng không bắt được trạng thái tạm treo khi tải mã như Suspense.
Đáp án đúng: "fetch(url).then((response)=>{ return response.json(); } ).catch(error => console.log(error))". fetch trả về một Promise; then nhận response và trả về response.json(), cũng là một Promise, còn catch đặt ở cuối chuỗi bắt mọi lỗi ném ra ở bất kỳ bước nào trước nó, như lỗi mạng làm fetch bị reject hay lỗi phân tích JSON, rồi ghi ra console. Cần nhớ fetch không reject khi server trả 404 hay 500; muốn coi đó là lỗi thì kiểm response.ok rồi tự ném lỗi trong then. Cách viết "then(response => response.catch(" sai vì response là đối tượng Response chứ không phải Promise, không có phương thức catch, gọi vào sẽ gây TypeError. "fetch(url).catch(error => {{
console.log(error)
}
}
)"bắt được lỗi mạng nhưng không bao giờ đọc dữ liệu trả về; cặp ngoặc nhọn lồng nhau chỉ là một khối lệnh thừa. Cách viết "then(response => { throw
new Error()
}
)"luôn ném lỗi kể cả khi yêu cầu thành công, nên catch chỉ ghi ra một lỗi rỗng thay vì xử lý dữ liệu.
response.data()response.json()response.jsonText()response.body.json()setStategetStateupdateStatemodifyStateĐáp án đúng: "<Route path="/users/:id" element={ <User /> } />". Trong React Router v6, một đoạn đường dẫn bắt đầu bằng dấu hai chấm là tham số động (dynamic segment): đường dẫn /users/123 khớp với mẫu này và giá trị 123 được gán cho tham số id; bên trong component User, ta lấy nó bằng hook useParams, nhận object có id là chuỗi "123". "<Route path="/users?id" element={ <User /> } />" sai vì phần sau dấu hỏi là query string, React Router không dùng nó để so khớp đường dẫn, nên mẫu này không bắt được /users/123. "<Route path="/users/{id}" element={ <User /> } />" sai vì cặp ngoặc nhọn là cú pháp tham số của framework khác như ASP.NET, còn React Router coi đây là chữ thường cần khớp nguyên văn. "<Route path="/users/#id" element={ <User /> } />" sai vì dấu thăng mở đầu phần hash của URL, không phải ký hiệu tham số trong path.
Đáp án đúng: "<Route> ". Trong React Router v6, mỗi thẻ Route khai báo một tuyến (route) gồm path là đường dẫn cần khớp và element là component hiển thị khi khớp, các Route được đặt trong Routes để thư viện chọn ra tuyến phù hợp. "<Router> " là bộ định tuyến bao ngoài cung cấp ngữ cảnh lịch sử điều hướng (BrowserRouter, HashRouter là các biến thể của nó); nó cần có nhưng không khai báo tuyến cụ thể nào. "<Link> " tạo liên kết điều hướng tới một đường dẫn mà không tải lại trang; nó dẫn người dùng tới một route chứ không định nghĩa route. "<Navigation> " không phải component của React Router; thư viện có Navigate để chuyển hướng bằng mã và NavLink cho liên kết có trạng thái đang chọn.
const MyComponent = () => {
const dispatch = useDispatch();
return <div>My Component</div>;
};const MyComponent = () => {
const dispatch = dispatch();
return <div>My Component</div>;
};Đáp án đúng: "const MyComponent = () => { const dispatch = useDispatch(); return <div>My Component</div>; };". useDispatch là hook của React Redux, phải GỌI nó ở cấp cao nhất của function component để nhận về hàm dispatch của store, sau đó dùng dispatch(action) trong các hàm xử lý sự kiện để gửi action tới reducer. Phương án viết "dispatch = useDispatch;" thiếu cặp ngoặc gọi hàm, nên biến dispatch chỉ giữ chính hàm hook chứ không phải hàm dispatch của store, gọi dispatch(action) về sau là gọi hook sai chỗ. Phương án viết "const dispatch = dispatch()" gọi một biến ngay trong câu khai báo chính nó; hằng const còn ở vùng chết tạm thời (temporal dead zone) nên ném ReferenceError, và cũng không hề dùng useDispatch. Phương án hiển thị "My Component with {dispatch}" lấy được dispatch đúng cách nhưng lại nhúng một hàm vào JSX làm nội dung con; React không render được hàm và sẽ cảnh báo, nên đó không phải cách dùng useDispatch đúng.
{
"name": "John Doe",
"age": 30,
"city": "New York"
}{
'name': 'John Doe',
'age': "30",
'city': 'New York'
}{
name: "John Doe",
age: 30,
city: "New York"
}{
"name" = "John Doe",
"age" = 30,
"city" = "New York"
}