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

Đáp án đúng: "The renderSectionHeader prop is a function which takes an item from the sections array and maps it to a React Element". renderSectionHeader là prop của SectionList: một hàm được gọi cho mỗi phần tử của mảng sections, nhận đối tượng có thuộc tính section rồi trả về phần tử React làm tiêu đề nhóm, ví dụ trả về một Text hiển thị section.title. "The renderSectionHeader prop is used to render the footer for each section in a SectionList or FlatList component" sai vì chân nhóm do renderSectionFooter vẽ, và FlatList vốn không có khái niệm section. "The renderSectionHeader prop is used to render the items within each section in a SectionList or FlatList component" nhầm với renderItem, hàm vẽ từng mục trong mảng data của section. "The renderSectionHeader prop is used to render the separator between sections in a SectionList or FlatList component" nhầm với SectionSeparatorComponent và ItemSeparatorComponent, các prop nhận component làm vạch ngăn.

Đáp án đúng: "Text". Text là core component (thành phần lõi) hiển thị văn bản, được ánh xạ sang view văn bản gốc của từng nền tảng; mọi chuỗi chữ phải đặt trong Text, và Text lồng nhau kế thừa style của Text cha. "View" là khung chứa để dựng bố cục với flexbox, không tự hiển thị chữ. "Image" hiển thị ảnh từ tài nguyên cục bộ hoặc URL. "ScrollView" là vùng cuộn bao lấy nội dung khác, chính nó không hiển thị văn bản. Như vậy View, Image và ScrollView đều quan trọng nhưng mỗi cái giải quyết một nhu cầu khác, chỉ Text mới đảm nhận việc vẽ chữ lên màn hình.

Đáp án đúng gồm hai ý: "DrawerLayoutAndroid" và "TouchableNativeFeedback". React Native có một số component chỉ chạy trên một nền tảng; với Android, DrawerLayoutAndroid bọc DrawerLayout gốc để tạo ngăn kéo trượt từ cạnh màn hình, còn TouchableNativeFeedback tạo hiệu ứng gợn sóng (ripple) chuẩn Material khi chạm. "InputAccessoryView" sai vì đây là component chỉ dành cho iOS, cho phép gắn thanh công cụ tuỳ chỉnh phía trên bàn phím. "SafeAreaView" sai vì nó được thiết kế cho iOS 11 trở lên để tránh tai thỏ và thanh home; trên Android nó chỉ hiển thị như View thường, nên không xếp vào nhóm component của Android. Khi cần component riêng cho một nền tảng, có thể tách tệp theo đuôi .android.js và .ios.js, hoặc kiểm tra Platform.OS trước khi render.

Đáp án đúng gồm hai ý: "InputAccessoryView" và "SafeAreaView". Theo tài liệu React Native, hai component này nằm trong nhóm dành riêng cho iOS: InputAccessoryView gắn thanh giao diện tuỳ biến ngay trên bàn phím khi TextInput đang focus, còn SafeAreaView đệm nội dung tránh tai thỏ, thanh trạng thái và home indicator, chỉ có tác dụng trên iOS 11 trở lên. "DrawerLayoutAndroid" là component riêng của Android, bọc ngăn kéo điều hướng kéo ra từ mép màn hình, đúng như hậu tố Android trong tên. "TouchableNativeFeedback" cũng chỉ chạy trên Android, tạo hiệu ứng gợn sóng (ripple) của Material Design khi chạm; trên iOS phải dùng TouchableOpacity hoặc TouchableHighlight.

Đáp án đúng gồm hai ý: "TextInput is often linked to a state variable to display the current value and update when the user changes the content." và "The value property in TextInput should be linked to a state variable so that the component can control the displayed content (controlled component).". Mẫu chuẩn là controlled component (component được điều khiển): khai báo state bằng useState, truyền state vào prop value và truyền hàm set vào onChangeText; mỗi lần người dùng gõ, onChangeText nhận chuỗi mới, state đổi, component render lại và TextInput hiển thị đúng giá trị trong state, nhờ đó dễ kiểm tra hợp lệ hay định dạng dữ liệu. "TextInput cannot use state to store the value entered by the user." sai, vì dùng state chính là cách phổ biến nhất như vừa mô tả. "The onChangeText event is used to update the props of TextInput directly." sai vì props là chỉ đọc, không thể sửa trực tiếp; onChangeText chỉ đưa chuỗi mới cho ta cập nhật state, rồi state mới được truyền lại vào value.

Đáp án đúng: "It triggers a callback function whenever the text in the TextInput changes". onChangeText nhận một hàm, React Native gọi hàm đó mỗi lần nội dung ô nhập thay đổi và truyền vào chuỗi văn bản mới, nên thường viết onChangeText={setText} để cập nhật state, rồi truyền lại value={text} tạo thành ô nhập có kiểm soát. "It specifies the initial text value of the TextInput" là việc của defaultValue. "It sets the placeholder text for the TextInput" là việc của prop placeholder. "It controls the styling of the TextInput" là việc của prop style. Khác với onChange nhận cả đối tượng sự kiện, onChangeText đưa thẳng chuỗi nên gọn hơn.

Đáp án đúng: "keyExtractor". FlatList gọi keyExtractor với item và index cho từng phần tử để lấy chuỗi key duy nhất; React dùng key đó khi đối chiếu danh sách cũ với mới, giữ đúng state của từng ô và tránh vẽ lại thừa. Không cung cấp thì FlatList dùng item.key, thiếu nữa thì dùng index. "extractKey" sai vì FlatList không có prop này, nó chỉ là đảo trật tự tên keyExtractor. "itemKey" sai vì đây không phải prop của FlatList; tên gần giống chỉ xuất hiện ở một số thư viện danh sách trên web. "getKey" sai vì FlatList không có prop getKey; các prop dạng hàm của nó mang tên như renderItem, keyExtractor, getItemLayout. Chỉ prop đúng tên mới được VirtualizedList, lớp nền của FlatList, đọc tới.

Đáp án đúng: "Using the drawerWidth prop". DrawerLayoutAndroid là component chỉ có trên Android, bọc nội dung chính và một ngăn kéo trượt ra từ cạnh; nó có prop drawerWidth nhận một số đơn vị độc lập mật độ (dp) để quy định bề rộng ngăn kéo, cùng các prop drawerPosition, renderNavigationView. "Using the style prop" áp style cho vùng chứa của layout chứ không điều khiển bề rộng ngăn kéo. "Using the drawerStyle prop" là option của Drawer Navigator trong React Navigation, không phải prop của DrawerLayoutAndroid. "Using a CSS file" không áp dụng được vì React Native không dùng tệp CSS; style được viết bằng đối tượng JavaScript với StyleSheet.create hoặc inline.

Đáp án đúng: "useFocusEffect". useFocusEffect của React Navigation nhận một callback bọc trong useCallback, chạy callback khi màn hình được focus và chạy hàm dọn dẹp khi màn hình mất focus; ở lần mount đầu màn hình được focus nên callback chạy ngay, vì vậy trong bốn hook được nêu đây là hook duy nhất thực thi một hành động gắn với lúc màn hình xuất hiện. Cần lưu ý nó còn chạy lại mỗi lần quay về màn hình; muốn chỉ chạy đúng một lần lúc mount thì dùng useEffect với mảng phụ thuộc rỗng. "useNavigation" chỉ trả về đối tượng navigation để gọi navigate hay goBack, không chạy hành động. "useRoute" trả về đối tượng route chứa params. "useIsFocused" trả về giá trị boolean cho biết màn hình đang focus, gây render lại khi giá trị đổi nhưng tự nó không thực thi tác vụ.

Đáp án đúng gồm hai ý: "Allows easier use in functional components." và "Reduces or eliminates the dependency on Higher-Order Components (HOCs).". React Navigation 5 thêm các hook như useNavigation, useRoute, useFocusEffect, useIsFocused; component hàm ở bất kỳ tầng nào gọi hook là lấy được đối tượng navigation hay route, không cần nhận qua prop. Trước đó, component con muốn điều hướng phải được bọc bằng HOC (Higher-Order Component, hàm nhận component và trả về component mới) như withNavigation hay withNavigationFocus, làm cây component rối và khó khai báo kiểu. "Completely eliminates the need for a navigation container." sai vì từ bản 5 trở đi ứng dụng vẫn phải bọc navigator trong NavigationContainer; hook không thay thế nó. "Requires the use of class components." sai vì hook chỉ dùng được trong component hàm, còn class component vẫn nhận navigation qua prop như cũ.

Đáp án đúng: "useLinking". Ở React Navigation 5, hook useLinking dùng với container điều hướng để lắng nghe URL mở ứng dụng, đối chiếu với prefixes và cấu hình ánh xạ đường dẫn sang màn hình rồi điều hướng tới đúng nơi, tức là xử lý deep linking (liên kết sâu); các bản sau chuyển phần này thành prop linking của NavigationContainer. "useScrollToTop" làm danh sách cuộn lên đầu khi bấm lại tab đang mở. "useRoute" trả về đối tượng route của màn hình hiện tại để đọc name và params. "useNavigation" trả về đối tượng navigation cho component không phải màn hình, để gọi navigate hay goBack.

Đáp án đúng: "The effect will run every time the component is focused and not unfocused". useFocusEffect gắn effect vào trạng thái focus của màn hình chứ không vào lúc mount: mỗi lần màn hình được focus, callback chạy; khi màn hình mất focus thì hàm cleanup mà callback trả về được gọi, effect không chạy vào lúc đó. Mảng phụ thuộc rỗng của useCallback bọc ngoài chỉ giữ cho hàm callback ổn định giữa các lần render, không biến effect thành chạy một lần. "The effect will run only once when the component mounts" là hành vi của useEffect với mảng rỗng; trong Stack, màn hình thường vẫn còn mounted khi ta chuyển sang màn khác rồi quay lại, và useFocusEffect vẫn chạy lại ở mỗi lần focus đó. "The effect will not run at all because it needs dependencies to function" sai vì mảng phụ thuộc rỗng là hợp lệ, effect vẫn chạy khi focus. "The effect will run every time the component is rendered, regardless of focus" mô tả useEffect không có mảng phụ thuộc, còn useFocusEffect không chạy theo từng lần render và luôn xét tới focus.

Đáp án đúng: "Drawer Navigator". Drawer Navigator hiển thị một ngăn kéo menu trượt ra từ cạnh màn hình (vuốt hoặc bấm biểu tượng menu), chứa các mục dẫn tới những phần lớn của ứng dụng, nên người dùng truy cập được các khu vực toàn cục từ bất kỳ màn hình nào. "Bottom Tab Navigator" cũng chuyển giữa các khu vực nhưng bằng thanh tab cố định ở đáy, không phải menu trượt, và hợp với số ít mục dùng thường xuyên. "Stack Navigator" quản lý các màn hình theo ngăn xếp, đi tới thì đẩy màn hình mới, quay lại thì gỡ ra, không có menu. "Inline Navigator" không phải navigator có trong React Navigation.

Đáp án đúng: "The name of the current route". useNavigationState nhận một hàm selector, gọi nó với state của navigator gần nhất và trả về kết quả, đồng thời render lại component khi kết quả đổi. Lần theo mã: state.routes là mảng các route trong navigator, state.index là vị trí route đang hiển thị, nên state.routes[state.index] là đối tượng route hiện tại, và thêm .name lấy ra tên của nó, ví dụ "Home" hay "Profile"; component in chuỗi đó trong Text. "The index of the current route in the navigation stack" sai vì đó là state.index, mã chỉ dùng index để truy cập phần tử chứ không trả về nó. "The parameters of the current route" sai vì muốn lấy tham số phải đọc .params thay vì .name. "The state object of the current route" sai vì selector đi thêm một bước tới .name, trả về chuỗi chứ không trả về cả đối tượng route.

Đáp án đúng: "A software system with tools to build, manage, publish, and consume APIs". Nền tảng API (API platform) là hệ thống phần mềm gom công cụ cho toàn vòng đời API: thiết kế đặc tả, viết và kiểm thử, xuất bản kèm tài liệu, quản lý phiên bản và quyền, tới phía người dùng khám phá và gọi API; Postman là ví dụ quen thuộc. "A database management system" sai vì hệ quản trị cơ sở dữ liệu lưu và truy vấn dữ liệu, không quản lý API. "A type of cloud infrastructure" sai vì nền tảng API có thể chạy trên đám mây nhưng bản thân nó là bộ công cụ, không phải hạ tầng máy chủ. "A web browser" chỉ là ứng dụng hiển thị trang web, gửi được yêu cầu HTTP nhưng không có chức năng quản lý API.

Đáp án đúng: "Platform module". Module Platform import từ react-native cho biết ứng dụng đang chạy trên nền tảng nào qua Platform.OS với giá trị 'ios' hoặc 'android', cho biết phiên bản hệ điều hành qua Platform.Version, và có Platform.select để chọn giá trị hay style theo từng nền tảng. "Device module" không có trong lõi React Native; thông tin thiết bị như model, hãng thường lấy qua thư viện ngoài như react-native-device-info hay expo-device. "PlatformDetect module" không tồn tại, chỉ là một tên ghép đoán. "OS module" là module os của Node.js dùng trên máy tính hay máy chủ, không có trong app React Native; thứ gần nhất chỉ là thuộc tính Platform.OS bên trong module Platform.

Đáp án đúng: "A JavaScript object that contains data that influences how a component looks in a particular area at a time". State là dữ liệu nội bộ do chính component sở hữu và có thể thay đổi theo thời gian, cập nhật qua setState hoặc hàm set của useState; mỗi lần state đổi, component render lại nên giao diện phản ánh dữ liệu mới. Phát biểu "Which stands for properties and is being used for passing data from one component to another" mô tả props, dữ liệu do component cha truyền xuống và chỉ đọc với con, không phải state. "Align children within the main axis of our container" mô tả justifyContent trong flexbox. "A method used for handling asynchronous tasks within the application" gần với Promise hay async/await, không phải khái niệm state.

Đáp án đúng gồm hai ý: "The Platform module allows checking the platform the application is running on." và "Platform.OS helps select the appropriate processing logic for a specific platform.". Platform là module tiện ích (không phải component) của react-native: Platform.OS trả về 'ios' hoặc 'android', Platform.Version cho phiên bản hệ điều hành, và Platform.select nhận đối tượng có khoá ios, android để chọn giá trị phù hợp, nhờ đó viết nhánh logic hay style riêng cho từng nền tảng trong cùng một tệp. "Platform is used to synchronize data between Android and iOS." sai vì Platform chỉ đọc thông tin môi trường chạy trên chính thiết bị, không truyền hay đồng bộ dữ liệu giữa các thiết bị. "Platform is a default component of react-native for creating custom components." sai vì Platform không render gì cả; component tuỳ chỉnh được tạo bằng hàm hoặc class React.

Đáp án đúng: "It converts JS code into native parts and vice versa.". Trong kiến trúc cũ, bridge (cầu nối) là kênh bất đồng bộ giữa thread JavaScript và phía native: lời gọi và mô tả giao diện từ JavaScript được tuần tự hoá thành JSON rồi chuyển sang để phía native dựng view thật hay gọi API hệ thống, còn sự kiện chạm và kết quả từ native đi theo chiều ngược lại; đây là ý của việc chuyển đổi qua lại giữa hai phía. "It simplifies the codebase." không phải tác động của bridge, nó còn thêm một lớp trung gian và chi phí tuần tự hoá. "It reduces the need for native modules." sai vì chính nhờ bridge mà native module mới gọi được từ JavaScript. "It eliminates the need for a JavaScript thread." sai vì bridge nối tới thread JavaScript chứ không thay thế nó.