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ố 1

Đáp án đúng: "JavaScript Thread". Trong kiến trúc Bridge, JavaScript Thread là nơi gói mã JavaScript (bundle do Metro đóng gói) được nạp, biên dịch và thực thi bởi engine như JavaScriptCore hoặc Hermes; mọi logic React, xử lý sự kiện và gọi API đều chạy ở đây rồi gửi chỉ thị qua Bridge. "Native Thread" là luồng chính chạy mã gốc, vẽ giao diện và nhận thao tác chạm, không chứa mã JavaScript. "JSRender Thread" không phải tên một luồng trong mô hình này. "Render Thread" là luồng vẽ đồ hoạ ở tầng hệ điều hành (ví dụ RenderThread của Android), không phải nơi đặt và biên dịch mã JavaScript.

Đáp án đúng: "To foster collaboration, promote consistency, and reduce risk". API platform (nền tảng quản lý API) như Postman hay các API gateway thường kèm công cụ governance (quản trị: quy tắc đặt tên, chuẩn thiết kế, kiểm tra theo style guide) và security (bảo mật: xác thực, phân quyền, quét lỗ hổng). Mục đích là để nhiều nhóm cùng làm việc trên một bộ chuẩn chung, các API nhất quán với nhau và giảm rủi ro lộ dữ liệu hay lỗi thiết kế. "To simplify the API development process" là lợi ích chung của cả nền tảng, không phải lý do riêng cho công cụ quản trị và bảo mật, vốn đôi khi còn thêm bước kiểm tra. "To restrict API usage to a limited audience" sai vì kiểm soát truy cập chỉ là một phần nhỏ, mục tiêu không phải thu hẹp người dùng. "To automate all API tasks" sai vì quản trị và bảo mật không tự động hoá mọi việc; nhiều quyết định vẫn cần con người.

Đáp án đúng: "The API platform's governance and security tools". Rủi ro trong quản lý API thường đến từ API thiếu chuẩn thống nhất, lộ dữ liệu hay truy cập trái phép; bộ công cụ governance (quản trị: quy tắc thiết kế, kiểm tra tuân thủ, quản lý phiên bản) cùng công cụ bảo mật (xác thực, phân quyền, quét lỗ hổng) của nền tảng API trực tiếp kiểm soát các rủi ro đó. "The automated testing of APIs" giúp bắt lỗi chức năng và hồi quy, có ích nhưng không quản lý chính sách hay quyền truy cập. "The use of cloud infrastructure" chỉ là nơi chạy hệ thống, tự nó không giảm rủi ro quản trị API. "The use of third-party libraries" còn có thể thêm rủi ro phụ thuộc và lỗ hổng từ bên ngoài.

Đáp án đúng: "onValueChange". Switch là công tắc bật tắt, nhận prop value kiểu boolean và gọi onValueChange với giá trị boolean mới mỗi khi người dùng gạt; cách dùng điển hình là truyền onValueChange bằng hàm set của useState rồi đưa state đó trở lại vào value để Switch thành controlled component. "onChange" là prop nhận đối tượng sự kiện native thô chứ không trả thẳng giá trị mới, nên không phải prop được dùng để xử lý thay đổi trạng thái công tắc. "onToggle" không phải prop của Switch, chỉ là tên đoán theo nghĩa bật tắt. "onPress" thuộc các component bấm được như Button, Pressable, TouchableOpacity, không dùng để nhận giá trị mới của Switch.

Đáp án đúng: "To display large quantities of scrollable content". FlatList hiển thị danh sách dài cuộn được một cách hiệu quả nhờ ảo hoá (virtualization): chỉ render những mục ở gần vùng nhìn thấy và gỡ bớt mục đã cuộn xa, nhận dữ liệu qua data, vẽ từng mục bằng renderItem và định danh bằng keyExtractor. "To display a list of items in a grid layout" chỉ là một cách dùng phụ khi đặt numColumns, không phải mục đích chính. "To create a carousel of images" làm được bằng FlatList ngang với pagingEnabled nhưng đó là ứng dụng riêng, không phải chức năng gốc. "To manage state within the component" là việc của useState hay useReducer, FlatList không quản lý state.

Đáp án đúng: "It will log 'ProfileScreen is now focused' every time the component gains focus". useIsFocused trả về true khi màn hình đang được hiển thị và false khi người dùng chuyển sang màn khác, đồng thời làm component render lại mỗi khi giá trị đổi. useEffect có mảng phụ thuộc chỉ gồm isFocused nên chỉ chạy lúc mount và khi isFocused thay đổi. Lần theo mã: lúc đầu chưa focus, isFocused là false, effect chạy nhưng điều kiện if không thoả nên không in gì; khi màn hình được focus, isFocused chuyển thành true, effect chạy lại và in dòng log; rời đi rồi quay lại thì chu trình lặp lại, nên log xuất hiện mỗi lần màn hình nhận focus. "It will log 'ProfileScreen is now focused' every time the component is rendered" sai vì effect không chạy theo mỗi lần render mà theo thay đổi của isFocused. "It will log 'ProfileScreen is now focused' only once when the component mounts" sai vì lúc mount màn hình chưa focus nên không in, và về sau còn in nhiều lần. "It will log 'ProfileScreen is now focused' every time the component is unfocused" sai vì khi mất focus isFocused là false, điều kiện if chặn việc in.

Đáp án đúng: "It allows for near-instant feedback for code changes.". Fast Refresh là tính năng của React Native (bật mặc định từ bản 0.61): khi lưu tệp, nó chỉ nạp lại module vừa sửa và render lại các component liên quan, đồng thời cố giữ state của function component, nên kết quả hiện ra gần như ngay lập tức. "It disables hot reloading." sai vì Fast Refresh thay thế và hợp nhất Hot Reloading với Live Reloading cũ, bật nó không nhằm tắt tính năng nào. "It enables network request monitoring." là việc của công cụ gỡ lỗi như trình xem mạng của DevTools hay Flipper. "It provides performance metrics." là việc của Perf Monitor hoặc Profiler, không phải Fast Refresh.

Đáp án đúng: "@react-navigation/stack". Để dùng Stack Navigator qua hàm createStackNavigator, cần cài gói @react-navigation/stack cùng @react-navigation/native và các phụ thuộc như react-native-gesture-handler, react-native-screens; navigator này xếp các màn hình thành ngăn xếp, đẩy (push) màn mới lên trên và gỡ (pop) khi quay lại. "react-native-stack-navigator" không phải gói chính thức của React Navigation. "@react-navigation/tabs" không tồn tại; điều hướng tab nằm ở @react-navigation/bottom-tabs hoặc @react-navigation/material-top-tabs và tạo tab chứ không phải ngăn xếp. "react-navigation-stack" là gói của React Navigation phiên bản 4 cũ, đã bị thay thế khi thư viện chuyển sang các gói mang tiền tố @react-navigation từ phiên bản 5.

Đáp án đúng: "To force re-render when needed". FlatList là PureComponent: nó chỉ render lại khi props thay đổi theo phép so sánh nông (shallow), chủ yếu là data. Nếu renderItem đọc thêm một state bên ngoài data, chẳng hạn selectedId, thì khi state ấy đổi mà mảng data giữ nguyên tham chiếu, danh sách sẽ không cập nhật; truyền extraData={selectedId} báo cho FlatList biết cần render lại. "To change the background color" là việc của style hoặc contentContainerStyle. "To reduce image size" không liên quan, kích thước ảnh do component Image và nguồn ảnh quyết định. "To hide the list header" thực hiện bằng cách không truyền hoặc đổi ListHeaderComponent.

Đáp án đúng: "column". Khác với CSS trên web, React Native đặt flexDirection mặc định là column vì màn hình điện thoại thường dọc và nội dung hay xếp từ trên xuống; mọi View là flex container nên các con tự xếp theo chiều dọc nếu không chỉnh gì. Vì trục chính là trục dọc, justifyContent căn theo chiều dọc còn alignItems căn theo chiều ngang. "row" sai vì đó là mặc định của CSS trên trình duyệt, trong React Native phải khai báo flexDirection: 'row' mới xếp ngang. "row-reverse" sai vì đây là xếp ngang theo chiều từ phải sang trái, chỉ có khi khai báo rõ. "column-reverse" sai vì đây là xếp dọc từ dưới lên, cũng phải khai báo rõ mới có, dù nó cùng trục dọc với giá trị mặc định.

Đáp án đúng: "data". FlatList nhận nguồn dữ liệu qua prop data, là một mảng; mỗi phần tử của mảng được truyền vào renderItem để vẽ một dòng, còn keyExtractor lấy khoá từ chính phần tử đó. "items" không phải prop của FlatList; truyền vào sẽ bị bỏ qua và danh sách trống. "dataSource" là prop của ListView cũ, đã bị loại khỏi React Native, nên người từng dùng ListView dễ nhầm. "source" là prop của Image, dùng chỉ định ảnh cần hiển thị bằng uri hoặc require, không liên quan tới danh sách.

Đáp án đúng gồm hai ý: "Must inherit from Component imported from the react library." và "Needs to use the render() method to return the interface.". Class component được khai báo bằng class TenComponent extends Component, trong đó Component import từ gói react, và bắt buộc có phương thức render() trả về JSX mô tả giao diện; state nằm ở this.state và được cập nhật qua this.setState, props đọc qua this.props. "Does not need to import Text from react-native." sai: muốn hiển thị chữ thì vẫn phải import Text từ react-native, bất kể component viết bằng class hay bằng hàm, vì chữ trần không được đặt trực tiếp trong View. "Can be declared using the same syntax as Function Components." sai vì function component là một hàm nhận props và trả JSX, còn class component dùng cú pháp class với extends và render(), hai cách khai báo khác hẳn nhau.

Đáp án đúng: "By using the useReducer hook to create a custom reducer function and dispatch actions to update state". useReducer nhận một reducer, hàm thuần (state, action) => newState, cùng state ban đầu, rồi trả về cặp [state, dispatch]; component gọi dispatch với một action có type và mọi quy tắc chuyển trạng thái được gom trong reducer, hợp với state nhiều trường liên quan nhau. "By using a combination of useState hooks to manage different slices" làm được nhưng logic cập nhật bị rải rác, không phải cách áp dụng useReducer. "By implementing a custom state management solution using context and higher-order components" là tự dựng giải pháp khác, không dùng useReducer. "By directly mutating the state object within functional components" sai vì React so sánh tham chiếu, sửa trực tiếp state không kích hoạt render lại.

Đáp án đúng: "Xcode". Mã native iOS của dự án React Native (Objective-C, Swift, cấu hình target, CocoaPods qua tệp xcworkspace) được mở và biên dịch bằng Xcode, IDE (môi trường phát triển tích hợp) chính thức của Apple; chỉ Xcode có bộ SDK iOS, trình giả lập Simulator và công cụ ký ứng dụng, nên việc này phải làm trên macOS. "Visual Studio Code" rất phổ biến để viết phần JavaScript của React Native, nhưng không biên dịch được dự án iOS và thiếu công cụ cho mã native của Apple. "Android Studio" sai vì đây là IDE cho phần native Android (Java/Kotlin, Gradle), không dùng cho iOS. "Sublime Text" sai vì đây chỉ là trình soạn thảo văn bản, không có trình biên dịch, giả lập hay công cụ ký cho iOS.

Đáp án đúng: "Open source framework is specifically designed to build iOS and Android mobile apps". React Native là framework (khung phát triển) mã nguồn mở do Meta phát hành, cho phép viết ứng dụng bằng JavaScript và React rồi hiển thị bằng component giao diện native thật của iOS và Android, dùng chung phần lớn mã giữa hai nền tảng. "JavaScript library" là cách mô tả React, thư viện xây giao diện; React Native dựa trên React nhưng cung cấp thêm bộ công cụ build, component native và cơ chế nối tới nền tảng. "Programming language" sai vì ngôn ngữ dùng là JavaScript hoặc TypeScript, bản thân React Native không phải ngôn ngữ. "Cloud computing platform" sai vì React Native chạy trên thiết bị, không cung cấp hạ tầng đám mây.

Đáp án đúng: "SecureStore". SecureStore (gói expo-secure-store) lưu cặp khoá–giá trị đã được mã hoá, dựa trên Keychain của iOS và Keystore của Android, nên phù hợp để cất mật khẩu, token truy cập hay khoá bí mật. "AsyncStorage" lưu dữ liệu dạng văn bản thường, không mã hoá, ai lấy được tệp dữ liệu của app là đọc được, nên chỉ dùng cho dữ liệu không nhạy cảm. "LocalStorage" là API của trình duyệt web, không có sẵn trong React Native và vốn cũng không mã hoá. "Redux Store" chỉ giữ state trong bộ nhớ khi app đang chạy và mất khi tắt app; nếu kèm redux-persist thì dữ liệu lại được ghi xuống kho không mã hoá, nên đây không phải nơi an toàn cho mật khẩu.

Đáp án đúng: "TextInput". TextInput là component lõi cho phép người dùng nhập văn bản bằng bàn phím; giá trị được đọc qua onChangeText, thường gắn với state và truyền lại qua value để thành ô nhập có kiểm soát (controlled), kèm các prop như placeholder, keyboardType, secureTextEntry. "EditText" là widget nhập liệu của Android gốc, React Native dùng nó ở tầng dưới nhưng không cung cấp component tên đó cho JavaScript. "View" là khung chứa bố cục, không nhận nhập liệu. "Text" chỉ hiển thị chữ, người dùng không gõ vào được. Trên iOS, TextInput được ánh xạ sang ô nhập gốc của UIKit.

Đáp án đúng: "width". Trong style của React Native, width (cùng với height) đặt kích thước cố định cho component, nhận số theo đơn vị điểm độc lập mật độ (density-independent pixels) hoặc chuỗi phần trăm như '50%'; ví dụ khai báo width: 100 tạo ô rộng 100 điểm bất kể độ phân giải màn hình. "flex" sai vì flex cho component co giãn chiếm phần không gian còn lại theo tỉ lệ, tức kích thước động chứ không cố định. "dimensions" sai vì đây không phải thuộc tính style; React Native chỉ có module Dimensions (viết hoa) để đọc kích thước màn hình, không dùng để đặt kích thước component. "size" sai vì style của View không có thuộc tính size; kích thước luôn tách thành width và height.

Đáp án đúng: "render()". Trong class component, mỗi khi state đổi qua setState hoặc component cha truyền props mới, React chạy lại render() để tạo cây giao diện mới, so sánh với cây cũ rồi chỉ cập nhật phần khác biệt. "shouldComponentUpdate()" cũng được gọi trước mỗi lần cập nhật, nhưng vai trò của nó là trả về true hoặc false để quyết định có render lại hay không, không phải phương thức dựng lại giao diện. "constructor()" chỉ chạy một lần lúc tạo component để khởi tạo state. "getSnapshotBeforeUpdate()" chạy sau render() và ngay trước khi thay đổi được áp lên giao diện, để lấy thông tin như vị trí cuộn, chứ không phải phương thức được gọi lại để vẽ.