Đi phỏng vấn vị trí React Native cần trang bị những gì?

Bài viết này Station D sẽ tổng hợp một loạt các câu hỏi phỏng vấn React Native, phù hợp với mọi cấp độ lập trình viên React Native. Dưới đây là danh sách 30 câu hỏi phỏng vấn về React Native kèm theo câu trả lời ngắn gọn.

Câu hỏi phỏng vấn React Native cơ bản

1. React Native khác gì so với ReactJS?
   React Native là một framework cho phép phát triển ứng dụng di động đa nền tảng bằng cách sử dụng cùng một mã nguồn, trong khi ReactJS là một thư viện JavaScript chủ yếu dùng để xây dựng giao diện người dùng cho các ứng dụng web. React Native sử dụng các thành phần UI native, trong khi ReactJS sử dụng DOM ảo để tối ưu hóa việc cập nhật giao diện người dùng trên web.
2. Liệt kê các điểm chính để tích hợp React Native vào ứng dụng Android hiện có.
   Các điểm chính bao gồm: thêm các dependencies cần thiết vào dự án Android, thiết lập môi trường React Native CLI, tạo và liên kết một gói mới từ React Native vào dự án, và cuối cùng là tích hợp mã React Native với mã Android gốc.
3. Mô tả mạng trong React Native và cách thực hiện các cuộc gọi mạng AJAX trong React Native?
   Mạng trong React Native được quản lý bằng cách sử dụng các phương thức AJAX tiêu chuẩn như fetch hoặc thư viện Axios. Các cuộc gọi mạng có thể được thực hiện bằng cách sử dụng fetch để lấy dữ liệu từ một API, xử lý nó và cập nhật state của ứng dụng.
4. Props Drilling là gì và làm thế nào để tránh nó?
   Props Drilling là hiện tượng truyền props qua nhiều cấp của component, có thể gây rối và khó quản lý. Để tránh nó, bạn có thể sử dụng Context API hoặc Redux để quản lý state toàn cục, tránh việc phải truyền props qua nhiều lớp component.
5. Làm thế nào để debug các ứng dụng React Native và nêu tên các công cụ được sử dụng?
   Bạn có thể debug ứng dụng React Native bằng cách sử dụng công cụ React Developer Tools, Chrome Developer Tools, hoặc Flipper. Debugger trong React Native cũng hỗ trợ việc kiểm tra và sửa lỗi qua việc sử dụng lệnh console, breakpoints và xem cấu trúc component.
6. Mô tả các Timer trong ứng dụng React Native.
   React Native hỗ trợ các hàm timer như setTimeout, setInterval, clearTimeout, và clearInterval để quản lý thời gian và tạo các hành động lặp lại hoặc trì hoãn trong ứng dụng.
7. Redux trong React Native là gì và các thành phần quan trọng của Redux được sử dụng trong ứng dụng React Native?
   Redux là một thư viện quản lý state toàn cục cho các ứng dụng JavaScript, bao gồm React Native. Các thành phần quan trọng của Redux bao gồm Actions, Reducers và Store. Actions là các sự kiện mô tả điều gì đó đã xảy ra, Reducers xác định cách state ứng dụng thay đổi để phản hồi lại Actions, và Store là nơi lưu trữ toàn bộ state của ứng dụng.
8. State là gì và nó được sử dụng như thế nào trong React Native?
   State là một đối tượng trong một component React quản lý các dữ liệu thay đổi theo thời gian và quyết định giao diện hiển thị của component. Trong React Native, state được sử dụng để theo dõi và quản lý các thay đổi trong giao diện người dùng.
9. Làm thế nào để xử lý đầu vào của người dùng trong React Native?
   Đầu vào của người dùng trong React Native được xử lý bằng cách sử dụng các thành phần như TextInput, Button, và các sự kiện như onChangeText hoặc onPress. Các sự kiện này sẽ cập nhật state của component và từ đó cập nhật giao diện người dùng.
10. Props mặc định có sẵn trong React Native không và nếu có, chúng được sử dụng như thế nào?
    Có, props mặc định (defaultProps) có sẵn trong React Native và được sử dụng để định nghĩa giá trị mặc định cho các props nếu không được truyền vào từ component cha.
11. Threads là gì và giải thích các loại thread khác nhau trong React Native với mỗi loại được sử dụng như thế nào?
    Threads là các chuỗi thực thi độc lập có thể chạy đồng thời. Trong React Native, có ba loại thread chính: Main Thread (xử lý giao diện người dùng), Shadow Thread (xử lý bố cục và giao diện) và JavaScript Thread (thực hiện mã JavaScript).
12. Mô tả những lợi ích khi sử dụng React Native?
    React Native cho phép phát triển ứng dụng di động đa nền tảng với một cơ sở mã duy nhất, tiết kiệm thời gian và chi phí phát triển. Nó cung cấp hiệu suất gần như native, cho phép tái sử dụng mã giữa các nền tảng và có cộng đồng hỗ trợ lớn.
13. Flexbox là gì và mô tả các thuộc tính được sử dụng nhiều nhất của nó?
    Flexbox là một hệ thống bố cục được sử dụng trong React Native để tổ chức các thành phần trên giao diện người dùng. Các thuộc tính thường dùng bao gồm flexDirection, justifyContent, alignItems, và flexWrap.

Tham khảo việc làm React Native hấp dẫn trên Station D

Câu hỏi phỏng vấn React Native trung cấp

1. Nêu tên các thành phần cốt lõi trong React Native và sự tương đồng của chúng với web?
   Các thành phần cốt lõi trong React Native bao gồm View (tương tự div trên web), Text (tương tự p), và Image (tương tự img). Chúng cung cấp các khối xây dựng cơ bản để tạo giao diện người dùng trên di động.
2. Giải thích Async Storage trong React Native và định nghĩa khi nào nên sử dụng nó và khi nào không nên?
   Async Storage là một hệ thống lưu trữ dữ liệu đơn giản cho phép lưu trữ các cặp key-value trên thiết bị di động. Nó nên được sử dụng để lưu trữ dữ liệu mà không yêu cầu bảo mật cao, như cài đặt ứng dụng, và không nên sử dụng cho dữ liệu nhạy cảm hoặc dung lượng lớn.
3. Các cách khác nhau để định kiểu ứng dụng React Native là gì?
   Có thể định kiểu ứng dụng React Native bằng cách sử dụng StyleSheet, inline styles, hoặc các thư viện bên thứ ba như Styled Components hay Emotion.
4. Làm thế nào để sử dụng Routing với React Navigation trong React Native?
   React Navigation là một thư viện phổ biến để quản lý điều hướng trong React Native. Nó cung cấp các navigator như Stack Navigator, Tab Navigator, và Drawer Navigator để quản lý các màn hình và điều hướng giữa chúng.
5. Giải thích các thành phần FlatList, các tính năng chính của nó cùng với một ví dụ mã?
   FlatList là một thành phần hiệu quả để render danh sách cuộn dài trong React Native. Nó cung cấp các tính năng như lazy loading, pagination và custom item rendering. Một ví dụ cơ bản:

<FlatList
  data={dataArray}
  renderItem={({ item }) => <Text>{item.key}</Text>}
  keyExtractor={item => item.id}
/>

6. Các thành phần Touchable trong React Native là gì và khi nào nên sử dụng chúng?
   Touchable components là các thành phần tương tác như TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, và TouchableWithoutFeedback. Chúng nên được sử dụng khi bạn cần thực hiện các hành động khi người dùng chạm vào một thành phần.
7. Làm thế nào để viết mã khác nhau cho iOS và Android trong cùng một codebase? Có module nào hỗ trợ việc này không?
   Có thể viết mã khác nhau cho iOS và Android bằng cách sử dụng các phần mở rộng .ios.js và .android.js. React Native CLI tự động xác định hệ điều hành và chạy file tương ứng. Ngoài ra, có thể sử dụng module Platform để phân biệt mã.

   Module platform sẽ phát hiện từng nền tảng khi ứng dụng được chạy.

   import { Platform, Stylesheet } from 'react-native';
   
   const styles = Stylesheet.create({
       height: Platform.OS === 'IOS' ? 200 : 400
   })

8. ListView là gì và mô tả cách sử dụng nó trong React Native?
   ListView là một thành phần cũ để render danh sách trong React Native. Nó đã được thay thế bằng FlatList và SectionList nhưng vẫn có thể được sử dụng cho các ứng dụng cũ hoặc với các danh sách không quá dài.
9. Bridge là gì và tại sao nó được sử dụng trong React Native? Giải thích cho cả Android và iOS.
   Bridge là một cơ chế cho phép giao tiếp giữa mã JavaScript và mã native (Java, Swift) trong React Native. Nó giúp React Native tương tác với các API native và sử dụng các tính năng không có sẵn trong thư viện mặc định.
10. Toàn bộ mã React Native được xử lý như thế nào để hiển thị kết quả cuối cùng trên màn hình di động?
    Mã React Native được dịch thành các lệnh giao diện người dùng native bằng cách sử dụng Bridge. JavaScript thực thi trên một JavaScript thread và giao tiếp với mã native thông qua Bridge để cập nhật giao diện người dùng.

>> Xem thêm: Lộ trình học React Native từ cơ bản đến nâng cao

Câu hỏi phỏng vấn React Native nâng cao

1. Làm thế nào để làm cho ứng dụng React Native của bạn chạy mượt mà với các animation?
   Có thể tối ưu hóa animation trong React Native bằng cách sử dụng Animated API, LayoutAnimation, hoặc thư viện bên thứ ba như Reanimated. Các kỹ thuật như batching updates và giảm số lượng renders cũng giúp cải thiện hiệu suất.
2. Giải thích setNativeProps. Nó có gây ra vấn đề hiệu suất không và được sử dụng như thế nào?
   setNativeProps cho phép thay đổi thuộc tính của một component native mà không cần render lại toàn bộ component, giúp cải thiện hiệu suất. Tuy nhiên, nó có thể gây ra các vấn đề về hiệu suất nếu lạm dụng hoặc sử dụng không đúng cách.
3. Network Security và SSL Pinning là gì?
   Network Security là các biện pháp bảo mật để bảo vệ dữ liệu truyền tải qua mạng. SSL Pinning là một kỹ thuật giúp bảo vệ chống lại các cuộc tấn công man-in-the-middle bằng cách chỉ chấp nhận chứng chỉ SSL cụ thể đã được pin trên ứng dụng.
4. Có phương pháp nào lưu trữ dữ liệu nhạy cảm trong React Native không? Nếu có, hãy nêu phương pháp đó, nếu không có thì làm thế nào để đạt được điều này?
   React Native không cung cấp phương pháp tích hợp sẵn để lưu trữ dữ liệu nhạy cảm. Tuy nhiên, có thể sử dụng các thư viện như react-native-keychain hoặc react-native-sensitive-info để lưu trữ dữ liệu nhạy cảm một cách an toàn.
5. Mô tả vấn đề rò rỉ bộ nhớ trong React Native, làm thế nào để phát hiện và giải quyết nó?
   Rò rỉ bộ nhớ xảy ra khi ứng dụng không giải phóng bộ nhớ sau khi sử dụng, dẫn đến việc sử dụng bộ nhớ không cần thiết. Để phát hiện rò rỉ bộ nhớ, có thể sử dụng công cụ Profiler trong React Native Debugger hoặc Android Studio. Giải quyết bằng cách kiểm tra và đảm bảo giải phóng các references không cần thiết và hủy đăng ký các sự kiện khi component bị hủy.
6. Liệt kê một số bước để tối ưu hóa ứng dụng.
   Một số bước tối ưu hóa bao gồm: sử dụng PureComponent hoặc shouldComponentUpdate để tránh render lại không cần thiết, tối ưu hóa hình ảnh, sử dụng FlatList hoặc SectionList thay vì ListView, và giảm kích thước bundle bằng cách chỉ import các module cần thiết.
7. Nguyên nhân thực sự gây ra vấn đề hiệu suất trong React Native là gì?
   Vấn đề hiệu suất trong React Native thường đến từ việc render lại quá nhiều lần, sử dụng bộ nhớ không hiệu quả, quản lý state không tốt, và giao tiếp không hiệu quả giữa JavaScript và mã native thông qua Bridge.

Các câu trả lời ngắn gọn này cung cấp một cái nhìn tổng quan về những kiến thức cơ bản, trung cấp, và nâng cao cần thiết khi chuẩn bị phỏng vấn cho một vị trí liên quan đến React Native.

Những kiến thức cơ bản cần trang bị trước khi phỏng vấn React Native