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
50 câu trắc nghiệm kèm lời giải của môn Multiplatform Mobile App Development - Phát triển ứng dụng di động đa nền tảng, xếp đúng thứ tự trong đề. Trang 2/3 — câu 21–40.
Đáp án đúng: "1->3->2->5->4". Khi ứng dụng khởi động theo kiến trúc Bridge, luồng chính (main thread, được gọi là main cable trong các bước liệt kê) bắt đầu và nạp gói JavaScript trước (bước 1); nạp xong thì chuyển cho JavaScript thread thực thi (bước 3); mã React chạy, tạo cây giao diện mới và gửi thay đổi sang Shadow thread (bước 2); Shadow thread tính bố cục bằng Yoga và gửi kích thước, vị trí về luồng chính (bước 5); cuối cùng luồng chính mới vẽ được lên màn hình (bước 4). "1->2->3->4->5" sai vì cây giao diện chỉ sinh ra sau khi mã JavaScript đã được chuyển sang JavaScript thread. "2->3->4->1->5" sai vì không thể sinh giao diện trước khi nạp JavaScript. "1->3->4->2->5" sai vì luồng chính không thể vẽ trước khi có kết quả bố cục từ Shadow thread.
Đáp án đúng: "value". Switch trong React Native là controlled component (thành phần được điều khiển): prop value kiểu boolean quyết định công tắc đang bật hay tắt, kể cả lúc hiển thị lần đầu, và khi người dùng gạt thì Switch gọi onValueChange với giá trị mới để ta cập nhật state rồi truyền lại vào value. Vì vậy trạng thái ban đầu chính là giá trị khởi tạo của state gắn vào value, ví dụ useState(false). "initialValue" sai vì Switch không có prop này. "checked" sai vì đây là thuộc tính của thẻ input checkbox trên web, không phải prop của Switch. "initialChecked" sai vì Switch không có prop khởi tạo riêng; muốn giá trị ban đầu chỉ cần đặt state khởi tạo phù hợp cho value.
Đáp án đúng: "JavaScript". React Native cho phép viết logic và giao diện bằng JavaScript (hoặc TypeScript, vốn biên dịch về JavaScript) với cú pháp React và JSX; mã chạy trên engine JavaScript như Hermes rồi điều khiển component native của từng nền tảng. "Swift" là ngôn ngữ native của iOS, chỉ dùng khi viết native module hay tuỳ biến phần iOS của dự án. "Java" là ngôn ngữ native truyền thống của Android, cũng chỉ xuất hiện trong phần mã native. "Kotlin" là ngôn ngữ Android hiện đại, nay là mặc định trong thư mục android của dự án mới, nhưng vẫn không phải ngôn ngữ chính để viết ứng dụng React Native.
Đáp án đúng: "It renders the component's UI". render() là phương thức bắt buộc của class component, trả về JSX mô tả giao diện dựa trên this.props và this.state; React gọi nó khi mount và mỗi lần props hay state đổi, nên nó phải là hàm thuần, không gây side effect. "It updates the component's state" sai vì state được cập nhật bằng this.setState trong hàm xử lý sự kiện hoặc phương thức vòng đời; gọi setState ngay trong render sẽ gây vòng lặp render vô hạn. "It handles user input events" là việc của các hàm xử lý gắn vào onPress, onChangeText. "It performs data fetching operations" nên đặt trong componentDidMount hoặc useEffect, không đặt trong render vì render chạy rất nhiều lần.
import React,{ useEffect } from 'react';
import { Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
function HomeScreen(){
const isFocused =useIsFocused();useEffect(()=>{if(isFocused){
console.log('HomeScreen is focused');} else {
console.log('HomeScreen is not focused');}},[isFocused]);
return <Text>Home Screen</Text>;}
What will be logged if the component is initially focused and then loses focus?
A'HomeScreen is focused' initially, followed by 'HomeScreen is not focused'
B'HomeScreen is focused' only
C'HomeScreen is not focused' only
D'HomeScreen is not focused' initially, followed by 'HomeScreen is focused'
Lời giải
Đáp án đúng: "'HomeScreen is focused' initially, followed by 'HomeScreen is not focused'". Lần theo mã: useIsFocused trả về true khi màn hình đang focus và gây render lại mỗi khi trạng thái này đổi; useEffect phụ thuộc [isFocused] nên chạy sau lần render đầu và chạy lại mỗi lần isFocused đổi giá trị. Ban đầu isFocused là true nên in ra HomeScreen is focused; khi người dùng chuyển sang màn hình khác, isFocused thành false, effect chạy lại và in ra HomeScreen is not focused. "'HomeScreen is focused' only" sai vì bỏ qua lần chạy lại khi mất focus. "'HomeScreen is not focused' only" sai vì lần đầu màn hình đang focus. "'HomeScreen is not focused' initially, followed by 'HomeScreen is focused'" đảo ngược thứ tự thực tế.
Đáp án đúng: "Instantly seeing UI changes during development". Hot reloading (nay là Fast Refresh) cho phép lưu tệp là thấy thay đổi giao diện ngay trên máy ảo hay điện thoại, thường giữ nguyên state hiện tại của component, nên lập trình viên chỉnh style, bố cục hay chữ mà không phải build lại hay thao tác lại từ đầu tới màn hình đang làm. "Deploying an app to the Play Store" sai vì phát hành lên cửa hàng cần build bản release, hoàn toàn nằm ngoài cơ chế nạp nóng lúc phát triển. "Optimizing app performance on low-end devices" sai vì hot reloading chỉ phục vụ chế độ phát triển, không ảnh hưởng hiệu năng bản phát hành. "Accessing native camera APIs" sai vì truy cập camera cần thư viện hoặc Native Module; thay đổi mã native còn đòi build lại, hot reloading không giúp được.
Đáp án đúng gồm hai ý: "FileStream" và "MemoryStream". Trong .NET, lớp XmlSerializer thuộc System.Xml.Serialization chuyển một đối tượng thành văn bản XML, và phương thức Serialize nhận một luồng đích kiểu Stream để ghi kết quả vào; hai lớp con của Stream hay dùng nhất là FileStream, khi muốn ghi XML thẳng ra tệp trên đĩa, và MemoryStream, khi muốn giữ XML trong bộ nhớ để gửi qua mạng, lưu vào cơ sở dữ liệu hay đọc lại ngay. "StreamReader" là lớp đọc văn bản từ một luồng, dùng để đọc chứ không phải để ghi, nên không thể làm đích cho việc tuần tự hoá; nếu muốn đi qua lớp văn bản thì Serialize cũng có bản nhận TextWriter, chẳng hạn StreamWriter, chứ không phải StreamReader. "XmlReader" là bộ đọc XML tuần tự, đi cùng phương thức Deserialize để dựng lại đối tượng từ XML, tức chiều ngược lại của câu hỏi, và nó cũng không phải một luồng.
Đáp án đúng: "Code sharing between iOS and Android". Với React Native, phần lớn mã (giao diện bằng component, logic, gọi API, quản lý state) viết một lần bằng JavaScript và chạy trên cả iOS lẫn Android, nên chỉ cần một nhóm phát triển thay vì hai nhóm Swift và Kotlin, giảm chi phí xây dựng và bảo trì; đây là điểm thuyết phục khách hàng về chi phí. "Native performance" là ưu điểm thật vì giao diện dùng thành phần native, nhưng nó nói về trải nghiệm người dùng chứ không trực tiếp về tiết kiệm chi phí. "Limited community support" sai vì đây là điểm yếu chứ không phải ưu điểm, và thực tế cộng đồng React Native rất lớn. "Complex debugging process" sai vì gỡ lỗi phức tạp làm tăng chi phí, không thể đem ra làm điểm mạnh khi chào khách.
ATo define the layout of user interface components
BTo handle asynchronous JavaScript tasks
CTo interact with platform-specific APIs and functionalities
DTo manage state and data flow within the application
Lời giải
Đáp án đúng: "To interact with platform-specific APIs and functionalities". Native module là mã viết bằng Java/Kotlin trên Android hoặc Objective-C/Swift trên iOS, được đăng ký để JavaScript gọi được, nhằm dùng API riêng của nền tảng mà React Native chưa cung cấp sẵn như cảm biến, Bluetooth, SDK thanh toán, hoặc tái sử dụng thư viện native có sẵn. "To define the layout of user interface components" là việc của component và style Flexbox phía JavaScript. "To handle asynchronous JavaScript tasks" là việc của Promise và async/await chạy ngay trong JavaScript; native module có thể trả Promise nhưng đó không phải mục đích. "To manage state and data flow within the application" là việc của useState, Context hay Redux.
Đáp án đúng: "RCT_EXPORT_METHOD". Trong native module iOS viết bằng Objective-C, lớp tuân thủ giao thức RCTBridgeModule dùng macro RCT_EXPORT_MODULE() để đăng ký module với React Native, rồi dùng macro RCT_EXPORT_METHOD để xuất từng phương thức cho JavaScript gọi qua NativeModules; phương thức xuất ra chạy bất đồng bộ và trả kết quả qua callback hoặc Promise. "RCT_CREATE_METHOD" không tồn tại trong bộ macro của React Native, chỉ là tên đoán. "RCT_DEFINE_METHOD" cũng không có; React Native không dùng động từ define cho việc này. "RCT_NATIVE_METHOD" không tồn tại; macro đúng dùng chữ EXPORT để nói rằng phương thức được phơi ra cho phía JS.
Đáp án đúng: "flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center'". Ba ô vuông xếp ngang cần trục chính nằm ngang nên đặt hướng hàng; justifyContent điều khiển trục chính, giá trị space-around chia khoảng đều quanh mỗi ô; alignItems điều khiển trục phụ, lúc này là chiều dọc, giá trị center đưa các ô vào giữa màn hình theo chiều dọc (container cần flex: 1 để chiếm hết chiều cao). "flexDirection: 'column', justifyContent: 'center'" xếp các ô thành cột dọc và dồn vào giữa, không phải hàng ngang. "flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start'" xếp ngang nhưng dồn về góc trên bên trái, không cách đều, không căn giữa dọc. "flexDirection: 'column', justifyContent: 'space-between'" xếp dọc và đẩy các ô ra hai đầu.
AThe native module must be pre-compiled in the JavaScript Thread to be compatible with the bridge.
BThe native module needs to be integrated into the startup of the Native Thread to ensure it is always packaged and ready.
CThe native module must have its layout calculated first by the Shadow Thread to ensure an accurate interface.
DThe native module only needs to be added without requiring integration with any thread.
Lời giải
Đáp án đúng: "The native module needs to be integrated into the startup of the Native Thread to ensure it is always packaged and ready.". Native Module là mã native nên sống ở phía native: nó phải được đóng gói vào ứng dụng và đăng ký lúc ứng dụng khởi động (Android thêm Package vào getPackages trong MainApplication, iOS dùng RCT_EXPORT_MODULE), để khi JavaScript gọi thì phía native đã có sẵn module đó. Đây chính là ý tích hợp vào quá trình khởi động phía native. "The native module must be pre-compiled in the JavaScript Thread to be compatible with the bridge." sai vì JavaScript Thread chỉ chạy mã JavaScript, không biên dịch mã Java hay Objective-C; mã native được biên dịch lúc build bằng Gradle hoặc Xcode. "The native module must have its layout calculated first by the Shadow Thread to ensure an accurate interface." sai vì Shadow Thread chỉ tính bố cục cho thành phần giao diện; module không có giao diện thì không cần bố cục. "The native module only needs to be added without requiring integration with any thread." sai vì module không được đăng ký thì React Native không biết nó tồn tại và lời gọi từ JavaScript sẽ thất bại.
ATo display a list of items in a single column layout
BTo display a list of items in a grid layout
CTo create a carousel of images
DTo display a list of items organized into sections
Lời giải
Đáp án đúng: "To display a list of items organized into sections". SectionList là danh sách ảo hoá giống FlatList nhưng nhận prop sections, mỗi phần tử gồm title và mảng data; nó render tiêu đề nhóm bằng renderSectionHeader và từng mục bằng renderItem, hỗ trợ tiêu đề dính đầu khi cuộn, hợp với danh bạ theo chữ cái hay đơn hàng theo ngày. "To display a list of items in a single column layout" là trường hợp cơ bản của FlatList, không cần chia nhóm. "To display a list of items in a grid layout" làm bằng FlatList với prop numColumns. "To create a carousel of images" thường dùng FlatList hoặc ScrollView với horizontal và pagingEnabled.
ATo set the initial size of a component before any space distribution
BTo determine the maximum size of a component
CTo set the minimum size of a component
DTo determine the final size of a component
Lời giải
Đáp án đúng: "To set the initial size of a component before any space distribution". flexBasis xác định kích thước ban đầu của phần tử theo trục chính, trước khi Flexbox chia phần không gian dư bằng flexGrow hoặc co bớt phần thiếu bằng flexShrink; nó là điểm xuất phát của phép tính bố cục chứ chưa phải kết quả. "To determine the maximum size of a component" là việc của maxWidth hoặc maxHeight, đặt trần mà phần tử không được vượt. "To set the minimum size of a component" là việc của minWidth hoặc minHeight, đặt sàn mà phần tử không được co nhỏ hơn. "To determine the final size of a component" không đúng, vì kích thước cuối cùng là kết quả sau khi flexGrow, flexShrink tính toán từ flexBasis cùng các ràng buộc min và max, chứ không do một thuộc tính nào quyết định trực tiếp.
Đáp án đúng: "View". View là khối dựng cơ bản nhất của giao diện React Native: một khung chứa hỗ trợ bố cục flexbox, style, xử lý chạm và trợ năng, được ánh xạ sang android.view.View trên Android và UIView trên iOS; hầu hết component khác được lồng trong hoặc xây trên nó. "Image" chỉ chuyên hiển thị ảnh. "Text" chuyên hiển thị chữ và là nơi duy nhất được đặt chuỗi văn bản. "ScrollView" là một khung chứa có khả năng cuộn, tức được xây trên nền View chứ không phải nền tảng cho mọi component. Vì vậy khi dựng màn hình, ta bắt đầu bằng View để chia vùng, rồi đặt Text, Image hay danh sách vào bên trong.
Đáp án đúng: "IEnumerable<T>". Trong .NET, LinkedList<T> thuộc System.Collections.Generic là danh sách liên kết đôi, mỗi nút LinkedListNode<T> trỏ tới nút trước và nút sau; lớp này cài đặt ICollection<T>, IReadOnlyCollection<T> và IEnumerable<T>, nhờ IEnumerable<T> mà ta duyệt được nó bằng foreach và dùng được LINQ. "IList<T>" sai vì giao diện này đòi truy cập theo chỉ số như list[i], Insert và RemoveAt tại vị trí; danh sách liên kết muốn tới phần tử thứ i phải đi lần từ đầu, nên .NET cố ý không cho LinkedList<T> cài IList<T>, thay vào đó là AddFirst, AddLast, AddBefore, AddAfter. "ISet<T>"là giao diện của tập hợp không cho phần tử trùng, như HashSet<T> hay SortedSet<T>, trong khi danh sách liên kết chứa trùng thoải mái. "IDictionary<TKey, TValue>" dành cho cấu trúc ánh xạ khoá sang giá trị như Dictionary<TKey, TValue>, không phải một dãy phần tử có thứ tự như
AView is a basic container component, playing a similar role to the <div> tag in HTML, used to contain other components.
BView is a leaf component and cannot contain any child components inside.
CView is only used to display plain text and does not support layout or applying styles.
DView is mainly used to create layouts and apply style properties to the child components it contains.
Lời giải
Đáp án đúng gồm hai ý: "View is a basic container component, playing a similar role to the <div> tag in HTML, used to contain other components." và "View is mainly used to create layouts and apply style properties to the child components it contains.". View là component nền tảng, ánh xạ sang UIView trên iOS và android.view.View trên Android; nó chứa được bao nhiêu con tuỳ ý, là flex container để bố cục, nhận style như padding, backgroundColor, borderRadius, và chính các style căn chỉnh của View quyết định vị trí các con bên trong. "View is a leaf component and cannot contain any child components inside." sai vì View chính là khung chứa, hầu hết màn hình React Native là cây các View lồng nhau. "View is only used to display plain text and does not support layout or applying styles." sai vì View không hiển thị chữ trực tiếp, chữ phải nằm trong Text, còn bố cục và style lại là công dụng chính của View.
Đáp án đúng: "useState". useState là hook cơ bản để thêm state cục bộ vào component hàm: gọi useState(0) trả về cặp gồm giá trị hiện tại và hàm cập nhật; gọi hàm cập nhật làm component render lại với giá trị mới. "useEffect" sai vì hook này chạy tác dụng phụ sau khi render như gọi API, đăng ký sự kiện hay hẹn giờ, nó không giữ state. "useContext" sai vì nó đọc giá trị từ một Context do Provider phía trên cung cấp, dùng để chia sẻ dữ liệu qua nhiều tầng chứ không phải khai báo state riêng. "useReducer" cũng quản lý state được và hợp khi state phức tạp với nhiều kiểu hành động, nhưng câu hỏi hỏi hook thường dùng nhất, và đó là useState; useReducer là lựa chọn nâng cao hơn cho trường hợp đặc thù.
Đáp án đúng: "mapLocation". MapView của thư viện react-native-maps, thường dùng cùng Geolocation API để lấy toạ độ người dùng, không có prop nào tên mapLocation; vị trí hiện tại được bật bằng showsUserLocation và vùng nhìn đặt bằng region. Câu hỏi tìm thứ không phải prop nên chọn chuỗi này. "style" là prop hợp lệ, MapView cần style có kích thước (ví dụ flex: 1) thì bản đồ mới hiện. "provider" hợp lệ, chọn nhà cung cấp bản đồ như PROVIDER_GOOGLE thay cho Apple Maps mặc định trên iOS. "mapType" hợp lệ, chọn kiểu bản đồ standard, satellite hay hybrid. "region" hợp lệ, nhận latitude, longitude, latitudeDelta, longitudeDelta để xác định vùng đang hiển thị.
ATo set the dimensions of a component is by adding a fixed width and height to the style
BTo make components responsive
CTo dynamically adjust component size based on available space
DTo align components within a layout
Lời giải
Đáp án đúng: "To set the dimensions of a component is by adding a fixed width and height to the style". Kích thước cố định nghĩa là gán width và height bằng số không kèm đơn vị trong style, React Native hiểu là điểm độc lập mật độ (density-independent pixels); phần tử sẽ luôn có đúng cỡ đó bất kể màn hình to hay nhỏ, hợp cho những thứ cần cỡ chuẩn như ảnh đại diện hay biểu tượng. "To make components responsive" ngược lại với kích thước cố định; muốn co giãn theo màn hình thì dùng flex, phần trăm hoặc useWindowDimensions. "To dynamically adjust component size based on available space" là tác dụng của flex, chẳng hạn flex: 1 để phần tử chiếm phần không gian còn lại. "To align components within a layout" là việc của justifyContent, alignItems, alignSelf chứ không phải width và height.
