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 component is removed from the DOM.". Unmounting là giai đoạn cuối của vòng đời: component bị gỡ khỏi cây giao diện (trong React Native là cây view native, chữ DOM ở đây dùng theo cách gọi quen thuộc của React web); ngay trước đó componentWillUnmount hoặc hàm cleanup của useEffect chạy để huỷ timer, listener, subscription, tránh rò rỉ bộ nhớ. "The component is created and rendered in the DOM." là giai đoạn Mounting, khi constructor, render và componentDidMount chạy lần đầu. "The component is updated with new state or props." là giai đoạn Updating, xảy ra mỗi khi dữ liệu thay đổi. "The component handles errors." là giai đoạn Error Handling, dùng getDerivedStateFromError và componentDidCatch trong error boundary.

Đáp án đúng: "alignItems". alignItems căn các phần tử con dọc theo trục phụ (cross axis), trục vuông góc với hướng flexDirection; với mặc định column trong React Native, trục phụ là chiều ngang nên alignItems: 'center' đưa con vào giữa theo chiều ngang. "justifyContent" căn và phân bố phần tử theo trục chính, không phải trục phụ. "flexDirection" chỉ định trục chính là hàng hay cột, tức quyết định trục nào là trục phụ chứ không căn phần tử. "flexGrow" quy định phần tử giãn ra chiếm bao nhiêu khoảng trống còn dư dọc trục chính. Muốn chỉnh riêng một phần tử theo trục phụ thì dùng alignSelf.

Đáp án đúng: "column". Trong React Native, mỗi View là flex container và bố cục do engine Yoga tính; Yoga mặc định flexDirection là column, tức trục chính chạy dọc, các phần tử con xếp chồng từ trên xuống. Đây là điểm dễ nhầm vì CSS trên web mặc định là row. Hiểu đúng mặc định này giúp đoán được justifyContent đang căn theo chiều dọc còn alignItems căn theo chiều ngang. "row" sai trong React Native vì đó là mặc định của trình duyệt, ở đây phải gán flexDirection: 'row' mới có hàng ngang. "row-reverse" sai vì đây là hàng ngang đảo chiều từ phải sang trái, chỉ có khi gán rõ. "column-reverse" sai vì nó xếp dọc từ dưới lên, là biến thể đảo của column chứ không phải mặc định.

Đáp án đúng: "A set of rules defining the appearance and layout of components in a React Native application". Style sheet trong React Native, thường tạo bằng StyleSheet.create, là tập quy tắc kiểu dáng như màu, cỡ chữ, khoảng cách và thuộc tính Flexbox, được gán cho component qua prop style để quyết định giao diện và bố cục. Phát biểu "A file containing JavaScript code used for handling user interactions" mô tả phần xử lý sự kiện như onPress, không phải style. Phát biểu "A data structure used for managing state" mô tả state với useState hoặc Redux. Phát biểu "A utility for handling asynchronous tasks and data fetching" mô tả công cụ như fetch, axios hay React Query, không liên quan tới cách trình bày.

Đáp án đúng gồm hai ý: "It is compatible with JavaScript's object notation" và "It allows dynamic styling based on component state". Style trong React Native là đối tượng JavaScript với thuộc tính viết camelCase như backgroundColor, fontSize, nên viết ngay trong mã, dùng được biến, toán tử điều kiện và mảng style để gộp, ví dụ thêm styles.active vào mảng khi state isActive bằng true, nhờ đó giao diện đổi theo state rất tự nhiên. "It enhances performance significantly" không phải lý do chính: đối tượng thường tự nó không làm app nhanh hơn đáng kể, StyleSheet.create chủ yếu giúp kiểm tra và tổ chức style. "It avoids the need to import CSS files" mô tả một hệ quả chứ không phải lý do chọn: React Native vốn không có engine CSS, nên không có tệp CSS nào để import ngay từ đầu.

Đáp án đúng: "Flexbox". React Native dựng bố cục bằng Flexbox, triển khai qua engine Yoga: kích thước và vị trí phần tử được tính theo tỉ lệ (flex), hướng (flexDirection) và cách căn (justifyContent, alignItems) thay vì số cố định, nên cùng một bố cục co giãn nhất quán trên các màn hình kích thước khác nhau. "Grid" là mô hình bố cục lưới của CSS trên web, React Native không hỗ trợ CSS Grid. "Stack" là cách xếp chồng màn hình hay phần tử (như Stack Navigator), không phải hệ thống bố cục. "View" là component khung chứa áp dụng Flexbox, chứ bản thân nó không phải một kiểu bố cục.

Đáp án đúng: "backgroundColor". Style trong React Native là đối tượng JavaScript nên tên thuộc tính viết theo kiểu camelCase (viết liền, viết hoa chữ đầu mỗi từ từ từ thứ hai) thay cho dấu gạch ngang của CSS; màu nền khai báo là backgroundColor, ví dụ backgroundColor: 'tomato' hoặc 'rgb(255, 255, 255)'. "background-color" sai vì đây là cú pháp CSS trên web; React Native không nhận tên có gạch ngang làm thuộc tính style. "bg-color" sai vì đây là cách viết tắt không tồn tại trong style của React Native. "bg" sai vì đây là kiểu tên lớp tiện ích của Tailwind hay NativeWind, không phải thuộc tính style; StyleSheet sẽ coi nó là thuộc tính không hợp lệ.

Đáp án đúng: "flex-center". alignItems căn các con theo trục phụ, và React Native chỉ chấp nhận các giá trị flex-start, flex-end, center, stretch, baseline; không có giá trị nào tên flex-center, muốn căn giữa phải viết center. Câu hỏi tìm giá trị không thuộc nhóm nên chọn chuỗi này. "flex-start" là giá trị hợp lệ, dồn các con về đầu trục phụ. "center" hợp lệ, đặt các con ở giữa trục phụ. "flex-end" hợp lệ, dồn các con về cuối trục phụ. "stretch" là giá trị mặc định, kéo giãn các con cho đầy trục phụ khi chúng không đặt kích thước cố định theo trục đó.

Đáp án đúng: "By leveraging JavaScript and React". React Native cho phép viết một codebase bằng JavaScript (hoặc TypeScript) theo mô hình component của React; lúc chạy, các component như View, Text, Image được ánh xạ thành thành phần giao diện native thật của từng nền tảng, còn logic chạy trên engine JavaScript như Hermes. Nhờ vậy cùng một mã nguồn sinh ra ứng dụng cho cả iOS lẫn Android. "Via HTML and CSS only" sai vì React Native không dùng HTML; giao diện dựng bằng component riêng, style viết bằng đối tượng JavaScript giống CSS chứ không phải CSS thật. "By using native Swift and Kotlin separately" sai vì viết riêng Swift và Kotlin là hai codebase, đúng điều React Native muốn tránh. "Through web views in mobile browsers" sai vì đó là cách của ứng dụng lai như Cordova hay Ionic; React Native không vẽ giao diện trong web view.

Đáp án đúng: "Allows code reuse across iOS and Android.". React Native tiết kiệm chi phí vì một nhóm lập trình viên viết một codebase JavaScript hoặc TypeScript chạy trên cả iOS và Android, thay vì nuôi hai đội riêng cho Swift và Kotlin; sửa lỗi, thêm tính năng cũng chỉ làm một lần. "Requires writing separate code for each platform." là đặc điểm tốn kém của phát triển native riêng, đúng là điều React Native giúp tránh. "Only uses native components, no plugins needed." sai vì React Native dựa nhiều vào thư viện bên thứ ba cho điều hướng, lưu trữ, camera và nhiều thứ khác. "Completely eliminates open-source libraries." càng sai, vì chính React Native là dự án mã nguồn mở và hệ sinh thái của nó gồm vô số thư viện mã nguồn mở.