Tất cả câu hỏi
Ngân hàng câu hỏi trắc nghiệm có giải thích chi tiết.
Đáp án đúng: "const value = useContext(MyContext);". useContext là hook nhập từ react, nhận đối tượng context đã tạo bằng createContext và trả về giá trị của Provider gần nhất phía trên trong cây; nếu không có Provider nào thì trả về giá trị mặc định truyền cho createContext, và component sẽ render lại khi giá trị đó đổi. "const value = MyContext.useContext(); " sai vì đối tượng context chỉ có các thuộc tính như Provider và Consumer, không có phương thức useContext. "const value = useContextProvider(MyContext);" sai vì React không có hook tên useContextProvider; Provider là component dùng để cung cấp giá trị chứ không phải hook để đọc. "const value = MyContext.useContextProvider(); " sai vì cả phương thức lẫn tên gọi đó đều không tồn tại trên đối tượng context.
Đáp án đúng: "useState is used for managing simple state, while useReducer is used for complex state and state transitions.". useState hợp với state đơn giản và độc lập như một số, một chuỗi hay một cờ bật tắt; useReducer gom mọi cách chuyển trạng thái vào một hàm reducer(state, action), hợp khi state là đối tượng nhiều trường liên quan hoặc giá trị kế tiếp phụ thuộc giá trị trước theo nhiều loại hành động. "useState is a built-in Hook, while useReducer is a custom Hook." sai vì cả hai đều là hook có sẵn của React, import trực tiếp từ gói react. "useState is used for class components, while useReducer is used for functional components." sai vì không hook nào dùng được trong class component; cả hai chỉ dành cho function component. "useState is for local component state, while useReducer is for global application state." nhầm: cả hai đều tạo state cục bộ của component; muốn chia sẻ cho toàn ứng dụng thì phải kết hợp useReducer với Context hoặc dùng Redux.
function.class.const.component.Đáp án đúng: "<Child name="John" /> ". Props được truyền giống thuộc tính HTML: tên thuộc tính trong JSX chính là tên khoá trong object props mà component con nhận, nên viết name bằng chuỗi John thì bên trong Child đọc được props.name có giá trị John, hoặc phân rã tham số thành name. "<Child prop="name" value="John" /> " sai vì nó tạo hai prop có tên prop và value, con sẽ nhận props.prop là chuỗi name và props.value là John chứ không có prop name nào. "<Child propName="name" propValue="John" /> " sai vì React không có quy ước tách tên và giá trị thành hai thuộc tính như vậy; con chỉ nhận hai prop propName và propValue. "<Child data="John" /> " sai vì giá trị John được gửi dưới tên data, nên trong con phải đọc props.data, còn props.name vẫn là undefined.
import { createStore } from 'redux';
const store = createStore({ reducer: { counter: counterReducer } });import { createStore } from 'redux';
const store = createStore({ counter: counterReducer });import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ counter: counterReducer});import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({ reducer: { counter: counterReducer } });Đáp án đúng: "<Route path='/users/:id' /> ". Trong React Router, tham số động của URL được khai báo bằng dấu hai chấm đứng trước tên tham số trong prop path; route này khớp với /users/42 hay /users/abc, và component bên trong đọc giá trị bằng hook useParams, được một đối tượng có thuộc tính id mang chuỗi 42. Phương án "
<Route path='/users{?id}' />" mượn cú pháp kiểu URI template, React Router không hiểu cú pháp này nên không tạo ra tham số id nào. Phương án "<Route path='/users[?id]' /> " cũng là cú pháp không có trong React Router; ngoặc vuông là quy ước đặt tên thư mục route động của Next.js. Phương án "<Route param='/users/:id' /> " viết đúng mẫu đường dẫn nhưng đặt vào prop param không tồn tại; Route chỉ nhận đường dẫn qua prop path, nên route này không có đường dẫn để khớp.
Đáp án đúng: "Using the <Route> component". Trong React Router, mỗi tuyến đường được khai báo bằng một component Route với thuộc tính path chỉ mẫu đường dẫn và element chỉ component cần hiển thị khi khớp; ở v6 các Route được đặt bên trong Routes, và có thể lồng Route để tạo bố cục con. "Using the <Link> component" sai vì Link tạo liên kết để người dùng bấm chuyển trang phía client, nó điều hướng tới một route đã khai báo chứ không khai báo route. "Using the <Switch> component" sai vì Switch là component của v5 dùng để bọc các Route và chỉ hiển thị route đầu tiên khớp, đã được thay bằng Routes ở v6; bản thân nó không định nghĩa đường dẫn nào. "Using the <Redirect> component" sai vì Redirect của v5 dùng để chuyển hướng sang đường dẫn khác, ở v6 được thay bằng Navigate, không phải công cụ khai báo route.
Đáp án đúng gồm ba ý: "Enable functional components to have state", "Simplify component logic" và "Promote reusability of logic between components". useState và useReducer cho function component có state riêng mà không cần viết class; useEffect gom các phần logic liên quan, ví dụ đăng ký và huỷ đăng ký, vào cùng một chỗ thay vì rải qua componentDidMount, componentDidUpdate, componentWillUnmount, nên logic của component gọn và dễ theo dõi hơn; custom hook như useFetch hay useAuth đóng gói logic có state để nhiều component dùng lại mà không cần HOC hay render props. "Automatically optimize performance" không đúng vì Hooks không tự tối ưu gì cả; muốn tránh render thừa phải chủ động dùng useMemo, useCallback hoặc React.memo, và khai báo dependency sai còn có thể gây render lặp.