Những Câu Hỏi Phỏng Vấn React Native Phổ Biến Dành Cho Ứng Viên

React Native là một sản phẩm được phát triển bởi Facebook, là mã nguồn mở để xây dựng các ứng dụng di động đa nền tảng với JavaScript và React.

Sự khác biệt quan trọng nhất giữa ReactJS và React Native là React Native không sử dụng DOM mà thay vào đó dựa vào các thành phần iOS và Android gốc như View, Text và Image. ReactJS dành cho web, trong khi React Native dành cho thiết bị di động.

Phân tích kỹ từng thread, đặc biệt nhấn mạnh về việc Main UI thread chịu trách nhiệm vẽ giao diện người dùng, tối ưu hóa dữ liệu người dùng, và hiển thị thông tin, quản lý trạng thái. UI thread là thread duy nhất trong ứng dụng mobile native có thể tương tác trực tiếp với người dùng và các thành phần native.

Props là các giá trị được sử dụng để cung cấp từ các thành phần cha đến thành phần con, không thể bị thay đổi bởi thành phần nhận. Chúng làm cho các thành phần có thể tái sử dụng nhiều hơn với các đầu vào đa dạng.

Ngược lại, State là dữ liệu nội bộ của thành phần, có thể được cập nhật bằng setState (thành phần lớp) hoặc useState (thành phần hàm). Khi trạng thái thay đổi, thành phần sẽ render lại. Hiểu chức năng của props và state là rất quan trọng để quản lý logic giao diện của một ứng dụng mobile và tái sử dụng thành phần trong các ứng dụng React Native.

Hãy trả lời rằng một trong những lợi thế chính khi sử dụng React Native là tốc độ phát triển và hiệu quả về mặt chi phí khi so sánh với việc tạo ứng dụng gốc cho từng nền tảng riêng biệt.

Các công ty có thể sử dụng React Native để triển khai hiệu quả các ứng dụng đa nền tảng mà không cần phải thuê các nhóm cả iOS và Android riêng biệt. Ngoài ra, khuôn khổ này cho phép tải lại nóng và tải lại trực tiếp để phát triển và thử nghiệm nhanh hơn, cũng như có một cộng đồng hỗ trợ lớn.

Một số cải tiến thường gặp bao gồm sử dụng FlatList thay vì ScrollView cho các danh sách lớn, chỉ hiển thị các mục hiện đang hiển thị. Chúng ta có thể sử dụng React.memo, use Callback và useMemo để giảm thiểu việc hiển thị lại không mong muốn.

Khi xử lý hoạt ảnh, chúng ta nên sử dụng thư viện Reanimated vì nó tối ưu hóa luồng gốc. Ngoài ra, việc giảm kích thước gói và tải chậm các cửa sổ thừa có thể giúp cắt giảm thời gian khởi động và cải thiện tốc độ.

Context API phù hợp với các ứng dụng vừa và nhỏ trong đó dữ liệu như chủ đề, ngôn ngữ và thông tin đăng nhập của người dùng phải được trao đổi qua nhiều phần khác nhau mà không cần logic quá mức.

Trong khi đó, Redux được xây dựng để quản lý các trạng thái toàn cục phức tạp đòi hỏi nhiều logic để xử lý, chẳng hạn như cập nhật dữ liệu API, điều hướng, lưu trữ đệm, v.v. Redux cũng dễ gỡ lỗi hơn, nhờ vào phần mềm trung gian như Redux DevTools. Mặt khác, Redux có cấu trúc phức tạp hơn và yêu cầu cấu hình cẩn thận, khiến nó không phải lúc nào cũng là lựa chọn tốt nhất cho các ứng dụng đơn giản.

Khi tạo biểu mẫu React Native, tôi thường sử dụng Formik để xử lý logic đầu vào và Yup để xác thực. Formik giúp giảm đáng kể số dòng mã bằng cách tự động kiểm soát trạng thái của từng trường đầu vào. Trong khi đó, Yup cho phép tôi tạo các lược đồ chính xác để xác thực dữ liệu, chẳng hạn như địa chỉ email chính hãng, mật khẩu dài hoặc các trường không thể để trống. Kết hợp hai công nghệ này cho phép tôi tạo các biểu mẫu phức tạp, dễ bảo trì với khả năng xử lý lỗi hiệu quả khi người dùng nhập dữ liệu sai.

Tôi thường sử dụng react-native-firebase/messaging để tích hợp thông báo đẩy. Các bước như sau: cài đặt thư viện, cấu hình bảng điều khiển Firebase, lấy mã thông báo thiết bị bằng getToken() và gửi đến máy chủ.

Sau đó, ứng dụng sẽ nhận thông báo qua trình lắng nghe onMessage() hoặc phương thức setBackgroundMessageHandler(), tùy thuộc vào việc thông báo đó ở chế độ nền trước hay nền sau. Để hiển thị thông báo trên iOS, trước tiên tôi phải yêu cầu quyền từ người dùng bằng requestPermission().

Ngoài Firebase, tôi đã sử dụng OneSignal trong các dự án đơn giản hơn do giao diện người dùng thân thiện với người dùng để quản lý các chiến dịch thông báo.

Khi một ứng dụng bị crash, bước đầu tiên là kiểm tra nhật ký bằng adb logcat (dành cho Android) hoặc Xcode log (dành cho iOS). Tiếp theo, tôi kiểm tra bất kỳ bản nâng cấp thư viện nào gần đây, vì các phụ thuộc không tương thích thường là nguồn gây ra lỗi. Tôi cũng thử dọn bộ nhớ đệm bằng cách thực thi npx react-native-clean-project hoặc xóa thư mục node_modules, sau đó cài đặt lại npm. Nếu không được, tôi sẽ dần dần chú thích logic để khám phá mức độ sự cố. Hơn nữa, nếu tôi sử dụng Sentry, tôi có thể thấy lỗi chi tiết trong nhật ký người dùng.

Trong phần lớn các dự án của mình, tôi sử dụng các thư viện React Navigation để quản lý điều hướng navigation. Thư viện này hỗ trợ nhiều trình navigator, bao gồm Stack, Tab và Drawer. Đối với các ứng dụng có nhiều màn hình và có thể chuyển đổi qua lại, tôi sử dụng Stack Navigator. Nếu phần mềm bao gồm thanh điều hướng ở dưới cùng, tôi sử dụng Tab Navigator.

Tôi cũng sử dụng use Navigation, navigation.navigate và route.params để gửi và nhận dữ liệu trên các màn hình. Ngoài ra, tôi thiết lập liên kết sâu khi ứng dụng phải điều hướng đến các URL bên ngoài như email hoặc thông báo đẩy.

Hook useEffect được sử dụng để quản lý các hiệu ứng phụ trong các thành phần hàm, chẳng hạn như gọi API, cấu hình đăng ký hoặc thực thi logic khi phần gắn kết hoặc cập nhật. Cú pháp cơ bản là: useEffect(() => {... }, [dependencies]).

Nếu không có các dependency, hiệu ứng sẽ chỉ xảy ra một lần khi thành phần được gắn kết. Đây là một tiện ích rất hữu ích trong React Native để đồng bộ hóa dữ liệu từ máy chủ, lắng nghe các thay đổi trong điều hướng và triển khai logic dọn dẹp khi phần bị xóa. Tuy nhiên, hãy thận trọng với các dependency để tránh tạo ra vòng lặp render hoặc các vấn đề về logic.

Để hỗ trợ nhiều ngôn ngữ tại ứng dụng hiệu quả thế nào trong React Native, tôi sử dụng thư viện react-i18next cùng với i18next. Thư viện này cho phép bạn quản lý các tệp ngôn ngữ khác nhau cho từng ngôn ngữ và tích hợp đơn giản vào các phần thông qua hook useTranslation.

Để hiển thị tài liệu như thế nào trong một ngôn ngữ cụ thể, tôi tạo các khóa và giá trị trong các tệp JSON (ví dụ: en.json, vi.json) và sử dụng t('key'). Tôi cũng bao gồm khả năng chuyển đổi ngôn ngữ trực tiếp ở ứng dụng và lưu lựa chọn của người dùng vào AsyncStorage để duy trì giữa các lần mở ứng dụng.