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: "Updating". Giai đoạn Updating diễn ra mỗi khi props hoặc state thay đổi và có thể lặp lại rất nhiều lần trong đời một component, nên đây là nơi tối ưu hiệu năng mang lại lợi ích lớn nhất: dùng shouldComponentUpdate, PureComponent, React.memo, useMemo, useCallback để tránh render lại thừa. "Mounting" chỉ xảy ra một lần khi component được tạo và gắn vào cây giao diện; nó ảnh hưởng tốc độ hiển thị ban đầu nhưng không lặp lại. "Unmounting" là lúc component bị gỡ, chủ yếu để dọn dẹp như huỷ timer, listener, subscription; việc này quan trọng để tránh rò rỉ bộ nhớ chứ không phải điểm tối ưu chính. "Error Handling" bắt lỗi trong cây con bằng error boundary, phục vụ độ ổn định của app chứ không nhằm vào hiệu năng.

Đáp án đúng: "A developer needs to integrate fingerprint authentication, which requires access to native device APIs for both iOS and Android. By implementing this as a Native Module, they can efficiently leverage platform-specific APIs to provide secure authentication without compromising performance.". Native Module đáng làm khi ứng dụng cần một khả năng của nền tảng mà JavaScript không tự truy cập được; xác thực vân tay phải gọi API sinh trắc học riêng của từng hệ điều hành (BiometricPrompt trên Android, LocalAuthentication trên iOS), nên viết module gốc rồi đưa ra một hàm chung cho JavaScript là lựa chọn hợp lý. Tình huống "center-align text in their app" sai vì căn giữa chữ chỉ cần textAlign: 'center' trong style. Tình huống "add a button with a color change on press" sai vì Pressable hay TouchableOpacity cùng state đã làm được, không cần mã gốc. Tình huống "to handle static images, even though no platform-specific functionality is needed" sai vì component Image với require đã hiển thị ảnh tĩnh, và chính mô tả cho biết không cần tính năng riêng của nền tảng.

Đáp án đúng: "column". flexDirection xác định trục chính để xếp các phần tử con trong một flex container. React Native dùng engine bố cục Yoga, và Yoga chọn column làm mặc định cho mọi View, nên các con xếp từ trên xuống dưới nếu không khai báo gì; đây là điểm khác với CSS trên trình duyệt, nơi mặc định là row. Hệ quả là justifyContent mặc định căn theo trục dọc, còn alignItems căn theo trục ngang. "row" sai vì muốn xếp ngang phải khai báo flexDirection: 'row' rõ ràng. "row-reverse" sai vì đây là giá trị xếp ngang đảo chiều, chỉ áp dụng khi được gán. "column-reverse" sai vì nó xếp dọc từ dưới lên, cũng không phải mặc định mà phải gán chủ động.

Đáp án đúng: "It reduces I/O overhead". multiGet của AsyncStorage nhận một mảng khoá và trả về các cặp khoá–giá trị trong một lần gọi, nên chỉ qua tầng native và truy cập kho lưu trữ một lần thay vì lặp lại cho từng getItem; chi phí vào–ra (I/O overhead) và số lần chờ bất đồng bộ đều giảm. "It uses more memory" sai vì gom lệnh không làm tốn thêm bộ nhớ đáng kể, lượng dữ liệu đọc ra vẫn như cũ. "It slows down access" ngược với thực tế, một lời gọi gom nhanh hơn nhiều lời gọi rời. "It requires extra permissions" sai vì AsyncStorage dùng vùng lưu trữ riêng của ứng dụng, getItem hay multiGet đều không cần cấp quyền nào.

Đáp án đúng gồm hai ý: "props are used to pass data from a parent component to a child component, while state is used to manage the internal data of a component." và "state can be changed by the component itself, while props are read-only for the receiving component.". props là dữ liệu component cha truyền xuống con, phía con chỉ được đọc; state là dữ liệu nội bộ do chính component sở hữu, được đổi bằng this.setState hoặc hàm set của useState, và mỗi lần đổi sẽ khiến component render lại. "props allow the component to automatically update the displayed data based on user interactions." sai vì tương tác của người dùng được phản ánh bằng cách cập nhật state; props chỉ đổi khi component cha truyền xuống giá trị mới. "state should only be passed as a parameter between components and should not be used to store internal data." đảo ngược bản chất: state chính là nơi lưu dữ liệu nội bộ, còn khi muốn chia sẻ thì giá trị state được truyền xuống con dưới dạng props.

Đáp án đúng: "Key-value pairs". AsyncStorage là kho lưu trữ bền, bất đồng bộ theo mô hình khoá–giá trị: mỗi khoá là một chuỗi gắn với một giá trị cũng là chuỗi, đọc ghi qua setItem, getItem, removeItem; dữ liệu phức tạp phải JSON.stringify khi ghi và JSON.parse khi đọc. "Arrays" không phải cấu trúc gốc, mảng chỉ lưu được sau khi chuyển thành chuỗi JSON. "Buffers" là dữ liệu nhị phân, AsyncStorage không hỗ trợ lưu trực tiếp. "Trees" là cấu trúc phân cấp, AsyncStorage không có cơ chế lưu cây hay truy vấn theo quan hệ cha con.

Đáp án đúng: "ScrollView renders all items at once, increasing memory usage". ScrollView dựng mọi phần tử con ngay khi mount, kể cả phần ở xa ngoài màn hình, nên với hàng nghìn dòng nó tốn bộ nhớ và làm chậm lần hiển thị đầu; FlatList thì ảo hoá, chỉ render vùng gần màn hình và giải phóng phần đã cuộn qua. "ScrollView lacks touch gesture support" sai vì ScrollView xử lý cử chỉ cuộn, kéo, thu phóng bình thường. Phát biểu "FlatList automatically applies platform-specific optimizations" không phải lý do: ưu thế của FlatList đến từ cơ chế ảo hoá dùng chung cho cả hai nền tảng. "ScrollView requires manual key extraction" sai vì ScrollView không có khái niệm keyExtractor; đó là prop của FlatList.

Đáp án đúng gồm hai ý: "renderSectionHeader" và "renderItem". SectionList nhận prop sections là mảng các nhóm, mỗi nhóm có tiêu đề và mảng data; renderItem được gọi cho từng mục trong data để vẽ nội dung của mục, còn renderSectionHeader được gọi một lần cho mỗi section để vẽ tiêu đề nhóm nằm phía trên các mục của nó, và hai hàm này cùng tạo nên phần hiển thị của từng section. "renderRow" là prop của ListView cũ, component đã bị gỡ khỏi React Native và được thay bằng FlatList cùng SectionList. "renderComponent" không phải prop của SectionList; ngoài hai hàm trên, SectionList chỉ có các prop hiển thị khác như renderSectionFooter, ListHeaderComponent, ItemSeparatorComponent hay SectionSeparatorComponent.