Câu hỏi: MMA301 Phát triển ứng dụng di động đa nền tảng – Bộ ôn tập thi lại số 2

Đáp án đúng: "useReducer". useReducer là hook có sẵn của React, quản lý dữ liệu trong component bằng một reducer (state, action) => newState cùng hàm dispatch để gửi action, thích hợp khi state có nhiều trường hoặc logic chuyển trạng thái phức tạp. "Redux" là thư viện quản lý state toàn cục độc lập, có hook riêng qua react-redux nhưng bản thân nó không phải hook của React. "MobX" là thư viện quản lý state theo mô hình observable (quan sát được), cũng không phải hook. "Realm" là cơ sở dữ liệu di động lưu bền trên thiết bị, phục vụ lưu trữ chứ không phải hook quản lý dữ liệu trong component.

Đáp án đúng: "watchPosition continuously tracks location changes.". Geolocation API có hai cách lấy vị trí: getCurrentPosition gọi callback một lần với vị trí hiện tại rồi kết thúc, còn watchPosition đăng ký theo dõi và gọi callback mỗi khi thiết bị di chuyển, trả về một watchId để sau đó gọi clearWatch dừng lại. Vì vậy ứng dụng chỉ đường hay theo dõi chạy bộ dùng watchPosition, còn việc chỉ cần biết vị trí một lần như gắn địa điểm vào bài đăng dùng getCurrentPosition cho đỡ tốn pin. "watchPosition provides a one-time location update." sai vì lấy một lần là hành vi của getCurrentPosition. "getCurrentPosition continuously tracks location changes." sai vì hàm này không theo dõi liên tục. "Both provide continuous location updates." sai vì chỉ watchPosition cập nhật liên tục.

Đáp án đúng: "Inline styles". Trong React Native, style là đối tượng JavaScript với tên thuộc tính viết camelCase, ví dụ truyền thẳng vào prop style một đối tượng có backgroundColor và fontSize; đó là inline style, và StyleSheet.create cũng dùng đúng dạng đối tượng này, chỉ là gom ra ngoài component. "CSS modules" là các tệp .css có tên class được băm cục bộ, dùng trên web cùng bundler, React Native không đọc được. "SASS files" là ngôn ngữ tiền xử lý CSS với cú pháp tên thuộc tính có gạch nối như background-color, không dùng trong React Native. "HTML classes" là thuộc tính class hay className của HTML để gắn style từ tệp CSS, trong khi React Native không có HTML và không áp style theo class.

Đáp án đúng gồm hai ý: "Media Type" và "Quality". Thư viện react-native-image-picker mở camera hoặc thư viện ảnh qua launchCamera và launchImageLibrary, nhận một đối tượng options mô tả cách chọn: mediaType chọn loại phương tiện là ảnh, video hay cả hai, còn quality (từ 0 đến 1) đặt mức nén ảnh trả về; ngoài ra còn maxWidth, maxHeight, selectionLimit. "Font Size" không thuộc options vì picker dùng giao diện gốc của hệ điều hành, thư viện không cho chỉnh cỡ chữ. "Background Color" cũng không phải tuỳ chọn của picker, màu nền của giao diện chọn ảnh do hệ điều hành quyết định.

Đáp án đúng: "shouldComponentUpdate()". Câu dẫn là bản dịch máy của một câu trong tài liệu React, cần đọc lại như sau: dedication là rendering (lúc render), buildings or circuits là props or state, adopted là received; tức câu gốc hỏi phương thức nào được gọi trước khi render khi component nhận props hoặc state mới. Đó là shouldComponentUpdate(nextProps, nextState) trong component dạng class: nó trả về true để React tiếp tục render, hoặc false để bỏ qua lần cập nhật này, nhờ vậy dùng để tối ưu hiệu năng. "componentShouldMount()" không tồn tại trong vòng đời React; giai đoạn gắn chỉ có constructor, render và componentDidMount. "componentWillUpdate()" có thật nhưng chỉ chạy sau khi shouldComponentUpdate đã trả về true, ngay trước render, và nay đã đổi tên thành UNSAFE_componentWillUpdate vì không còn được khuyên dùng. "componentUpdate()" không phải phương thức vòng đời nào; tên gần nhất là componentDidUpdate, chạy sau khi render xong chứ không phải trước đó.

Đáp án đúng: "Replace FlatList with ScrollView.". Câu hỏi tìm cách KHÔNG cải thiện hiệu năng. ScrollView render toàn bộ phần tử con ngay một lúc, với hàng nghìn mục sẽ ngốn bộ nhớ và làm chậm; FlatList thì ảo hoá danh sách (virtualization), chỉ render các mục gần vùng nhìn thấy, nên đổi sang ScrollView chỉ khiến app lag hơn. "Use keyExtractor to provide stable keys." đúng là có ích: key ổn định giúp React nhận diện từng mục, tránh gỡ đi dựng lại không cần thiết. "Wrap item components with React.memo." cũng có ích vì component mục chỉ render lại khi props của nó thay đổi. "Use extraData when items depend on external state." là cách dùng đúng được khuyến nghị: báo cho FlatList biết khi nào cần cập nhật theo state bên ngoài, giữ danh sách chính xác mà không phải render lại toàn bộ; vì đều là biện pháp hợp lệ nên chúng không được chọn.

Đáp án đúng: "Promises enable async/await syntax". Phương thức native có thể trả kết quả về JavaScript bằng callback hoặc Promise; với Promise, phía native nhận cặp resolve và reject (RCTPromiseResolveBlock trên iOS, tham số Promise trên Android), còn phía JavaScript có thể viết await MyModule.doWork() trong hàm async, bắt lỗi bằng try/catch và tránh lồng callback nhiều tầng. "Promises are faster" sai vì cả hai đều đi qua cùng cơ chế gọi native bất đồng bộ; Promise không làm lời gọi nhanh hơn. "Promises are synchronous" sai vì Promise biểu diễn kết quả bất đồng bộ, giá trị chỉ có sau khi phía native gọi resolve. "Promises support JSON only" sai vì Promise không giới hạn kiểu; giá trị trả về chỉ cần là kiểu mà bridge chuyển được như chuỗi, số, mảng, đối tượng.

Đáp án đúng: "horizontal". ScrollView mặc định cuộn theo chiều dọc; đặt prop boolean horizontal bằng true (hoặc chỉ viết horizontal) thì các con được xếp thành hàng ngang và cuộn sang trái phải. "scrollDirection" không phải prop của ScrollView, React Native không đọc tới nó. "scrollEnabled" có tồn tại nhưng chỉ bật hoặc tắt khả năng cuộn, ví dụ khoá cuộn khi đang kéo một phần tử, không đổi hướng. "direction" là thuộc tính style quy định hướng bố cục trái sang phải hay phải sang trái (ltr, rtl) cho chữ và Flexbox, không phải prop điều khiển hướng cuộn.

Đáp án đúng: "style={{ alignItems: 'center', justifyContent: 'center' }}". Với flexDirection mặc định là column trong React Native, justifyContent căn phần tử con theo trục chính (trục dọc) còn alignItems căn theo trục phụ (trục ngang), nên đặt cả hai bằng 'center' trên View cha có kích thước, chẳng hạn flex: 1, sẽ đưa Text vào chính giữa. "style={{ flexDirection: 'row', alignContent: 'center' }}" không làm được vì alignContent chỉ tác động khi các dòng phần tử bị xuống hàng với flexWrap, không căn một phần tử theo cả hai chiều. "style={{ position: 'absolute', top: 0, left: 0 }}" ghim phần tử vào góc trên bên trái. "style={{ flexWrap: 'wrap', alignSelf: 'center' }}" chỉ cho xuống dòng và căn chính phần tử đó theo trục phụ, không căn giữa theo trục chính.

Đáp án đúng: "This is header! This is footer!". Lần theo mã: MainScreen render một View chứa lần lượt Header rồi Footer; Header render View bọc Text in "This is header!", Footer render View bọc Text in " This is footer!" (có dấu cách đầu). Vì View mặc định có flexDirection là column, hai dòng chữ hiện từ trên xuống theo đúng thứ tự khai báo, header trước, footer sau. "This is footer! This is header!" đảo thứ tự, sai vì React Native giữ thứ tự các con như trong JSX. "This is header!" thiếu phần footer dù Footer vẫn được render. "This is footer!" thiếu phần header dù Header được render trước. Các class component ở đây chỉ có render nên không có state hay điều kiện nào làm ẩn phần tử.

Đáp án đúng: "Containing and compiling all JavaScript code, running the bundle when the application starts.". Trong kiến trúc cổ điển, React Native có ba luồng chính: JavaScript Thread nạp bundle do Metro đóng gói, đưa cho engine như Hermes hay JavaScriptCore biên dịch và chạy toàn bộ mã JavaScript (component, state, logic, gọi API); Native Thread (UI Thread) vẽ giao diện và nhận thao tác chạm; Shadow Thread tính bố cục. "Executing native code and managing the user interface." sai vì đó là việc của Native Thread, tức main thread của ứng dụng. "Calculating the interface layout using the Yoga tool." sai vì việc tính bố cục bằng Yoga thuộc Shadow Thread. "Managing native modules to ensure they are always ready." sai vì Native Module được khởi tạo và chạy ở phía native, trên hàng đợi riêng của module hoặc Native Thread; JavaScript Thread chỉ gửi lời gọi tới chúng.

Đáp án đúng: "Can freeze UI or cause lag". UI thread (luồng giao diện, còn gọi là main thread) vừa vẽ khung hình vừa xử lý chạm; nếu native module chạy việc nặng như đọc tệp lớn, xử lý ảnh hay gọi mạng đồng bộ trên luồng này thì không còn thời gian vẽ khung hình kế tiếp, ứng dụng giật, đứng hình, trên Android có thể hiện ANR. Vì vậy việc nặng nên chạy ở luồng nền rồi trả kết quả qua Promise hoặc callback. "Causes Redux conflict" sai vì Redux là thư viện trạng thái phía JavaScript, không phụ thuộc luồng native. "Makes hooks invalid" sai vì luật của hook chỉ liên quan thứ tự gọi trong component, không dính tới native thread. "Prevents JSX compilation" sai vì JSX được Babel biên dịch lúc build, trước khi ứng dụng chạy.

Đáp án đúng: "Switch Navigator". Câu hỏi tìm navigator KHÔNG thuộc nhóm navigator chính đi kèm React Navigation. Switch Navigator (createSwitchNavigator) chỉ có ở phiên bản 4 trở về trước, từng dùng cho luồng đăng nhập; từ phiên bản 5 nó bị bỏ và thay bằng cách render có điều kiện các màn hình trong Stack tuỳ theo trạng thái đăng nhập. "Tab Navigator" có sẵn, chuyển giữa các màn hình ngang hàng bằng thanh tab ở đáy hoặc ở trên. "Drawer Navigator" có sẵn, mở menu trượt ra từ cạnh màn hình. "Stack Navigator" có sẵn và là navigator cơ bản nhất, đẩy và gỡ màn hình theo ngăn xếp. Ba loại này đúng là navigator chính của React Navigation nên không được chọn.

Đáp án đúng: "Integrating with a platform-specific API like Google Play services". Native Module cần đến khi JavaScript phải gọi một API riêng của nền tảng mà React Native chưa bọc sẵn, như Google Play services, SDK thanh toán, cảm biến hay phần cứng đặc thù; khi đó ta viết mã Java/Kotlin hoặc Objective-C/Swift rồi export phương thức cho JS gọi. "Adding a basic button to the app" đã có sẵn Button, Pressable, TouchableOpacity trong lõi React Native nên không cần mã native. "Displaying static text content" chỉ cần component Text. "Adjusting padding and margin of elements" làm bằng thuộc tính style như padding, margin trong StyleSheet, hoàn toàn ở phía JavaScript; cả ba việc này đều là thao tác giao diện cơ bản đã được React Native hỗ trợ sẵn.

Đáp án đúng: "space-between". justifyContent phân bố phần tử dọc theo trục chính; space-between đặt phần tử đầu sát mép đầu, phần tử cuối sát mép cuối, khoảng trống còn lại chia đều vào giữa các phần tử, nên các khe bằng nhau và không có khoảng dư ở hai mép container. "space-around" chia cho mỗi phần tử một khoảng bằng nhau ở hai bên, nên khoảng ở mép chỉ bằng nửa khe giữa, vẫn có khoảng dư ở mép. "space-evenly" làm mọi khoảng, kể cả hai mép, bằng nhau, nên mép cũng có khoảng trống. "center" dồn cả nhóm vào giữa trục chính, khoảng trống nằm hết ở hai mép.

Đáp án đúng: "To access to geographical location data associated with a user's device". Geolocation API cho ứng dụng đọc vị trí của thiết bị gồm vĩ độ, kinh độ, độ cao, độ chính xác, tốc độ và hướng, lấy từ GPS, Wi-Fi hoặc mạng di động, sau khi người dùng cho phép. Dữ liệu này dùng cho bản đồ, gợi ý cửa hàng gần nhất hay theo dõi hành trình. "To manage user authentication and authorization" sai vì xác thực và phân quyền là việc của hệ thống đăng nhập như OAuth hay Firebase Auth, không liên quan tới vị trí. "To handle navigation and routing within the application" sai vì chuyển màn hình trong app là việc của thư viện như React Navigation; chữ navigation ở đây không phải định vị địa lý. "To interact with external services and retrieve data" sai vì gọi dịch vụ ngoài là việc của fetch hay axios; Geolocation chỉ đọc vị trí của chính thiết bị.

Đáp án đúng: "renderNavigationView". DrawerLayoutAndroid là ngăn kéo điều hướng chỉ có trên Android; prop renderNavigationView nhận một hàm trả về giao diện sẽ hiện bên trong ngăn kéo khi kéo từ mép màn hình ra, còn nội dung chính đặt làm children. "drawerWidth" có tồn tại nhưng chỉ đặt bề rộng ngăn kéo, không chứa nội dung. "drawerContent" là tên prop của Drawer Navigator trong React Navigation, không phải prop của DrawerLayoutAndroid. "renderDrawer" không có trong API của DrawerLayoutAndroid, nghe giống nhưng sẽ bị bỏ qua và ngăn kéo trống.

Đáp án đúng gồm hai ý: "renderItem receives an element from the data array of each individual section and renders a React Element, representing that item in the section." và "renderSectionHeader receives an element from the sections array to create and display the header for that section.". SectionList hiển thị danh sách chia nhóm: prop sections là mảng các đối tượng nhóm, mỗi nhóm có tiêu đề và mảng data riêng; renderItem được gọi cho từng phần tử trong data của từng nhóm, còn renderSectionHeader được gọi một lần cho mỗi đối tượng trong sections để vẽ tiêu đề nhóm. Phát biểu "receives an element directly from the data array (i.e., the data of all sections combined)" sai vì tiêu đề nhóm nhận đối tượng section chứ không nhận phần tử dữ liệu, và không có mảng gộp mọi nhóm. Phát biểu "Both props (renderItem and renderSectionHeader) receive an element from the sections array" sai vì hai prop nhận hai loại dữ liệu khác nhau và có vai trò khác nhau.

Đáp án đúng: "To interact with platform-specific APIs and functionalities". Native module là cầu nối cho JavaScript gọi các API và tính năng riêng của iOS hoặc Android mà React Native chưa bọc sẵn, như cảm biến, Bluetooth, SDK của hãng; việc ứng dụng dùng useReducer chỉ là bối cảnh, vì useReducer quản lý state phía JS và không đổi vai trò của native module. "To manage asynchronous tasks and side effects" là việc của useEffect hoặc middleware như redux-thunk, redux-saga. "To define the layout and styling of user interface components" là việc của component và StyleSheet với Flexbox, làm hoàn toàn ở phía JavaScript. "To handle state management and data flow within the application" là việc của chính useReducer, Context hay Redux, không cần mã native.