Những câu hỏi phỏng vấn React Native [2023]

Bài viết này dựa trên những kinh nghiệm thực tế của tôi đúc kết lại và những bài viết tôi đã đọc để tham khảo. Ở đây có những câu hỏi tôi đã từng hỏi các bạn ứng viên và cũng là những câu hỏi khi đi phỏng vấn xin việc.

Tập chung vào những điều cơ bản cốt lõi, hi vọng bài viết này sẽ giúp các bạn hiểu hơn và có một buổi phỏng vấn tốt đẹp.

Để hữu ích nhất, tại từng câu hỏi tôi có để các link tham khảo thêm, rất mong các bạn độc giả hãy đọc nó để có cái nhìn cụ thể hơn, còn những phần trả lời của tôi chỉ mang tính tóm gọn để sử dụng phỏng vấn.

1. Thuật toán (Algorithm)

Câu 1: Kể tên một số thuật toán sắp xếp (Sorting Algorithms) ?

Có rất nhiều thuật toán sắp xếp (sort) có thể kể đến như: Quick Sort, Merge Sort, Heap Sort, Insertion Sort, Selection Sort, Shell Sort, Bubble Sort, Tree Sort, Cycle Sort, Strand Sort, Cocktail Shaker Sort, Comb Sort, Odd-even Sort, Tim Sort.

Mỗi thuật toán đều có ưu điểm và nhược điểm khác nhau, do đó tùy trường hợp cụ thể để xác định nên chọn thuật toán nào cho hợp lý.

Xem bảng so sánh độ phức tạp của các thuật toán:

Xem thêm cụ thể các ví dụ tại: https://www.geeksforgeeks.org/sorting-algorithms/

Câu 2: Cho một mảng chứa các số ngẫu nhiên, sử dụng một thuật toán để sắp xếp các số từ bé đến lớn ?

Những câu hỏi không có trường hợp cụ thể về ngữ cảnh như này, bạn hãy chọn một thuật toán sắp xếp (sort) nào mà bạn thấy tự tin nhất để viết code.

Ở câu hỏi này tôi sử dụng ngôn ngữ Javascript và thuật toán Selection Sort.

Mô tả các bước lập trình sẽ như sau:

  •  Khởi tạo biến có giá trị nhỏ nhất (min_idx) ở vị trí thứ 0.
  • Duyệt qua mảng để tìm giá trị phần tử có giá trị nhỏ nhất.
  • Trong khi di chuyển ngang nếu tìm thấy bất kỳ phần tử nào nhỏ hơn min_idx thì hoán đổi cả hai giá trị.
  • Sau đó, tăng min_idx để trỏ đến phần tử tiếp theo.
  • Lặp lại cho đến khi mảng được sắp xếp.

Code ví dụ:

Xem thêm thông tin chi tiết tại: https://www.geeksforgeeks.org/selection-sort/

Lưu ý: với những câu hỏi liên quan tới lập trình và đặc biệt là sử dụng thuật toán, bạn đọc không nên hoặc cố tính sử dụng các hàm có sẵn như find, sort để xử lý.

Câu 3: Tạo một mảng chứa các số Fibonacci với n ký tự ?

Fibonacci là dãy vô hạn các số tự nhiên bắt đầu bằng hai phần tử 0 hoặc 1 và 1, các phần tử sau đó được thiết lập theo quy tắc mỗi phần tử luôn bằng tổng hai phần tử trước nó (Wikipedia).

Để tạo ra một mảng chứ các số fibonacci có rất nhiều các khác nhau, ở câu hỏi này tôi sử dụng một cách rất phổ biến đó là đệ quy (recursion).

Xem thêm chi tiết các dạng câu hỏi và các hướng xử lý khác tại:

2. Javascript

Câu 1: Làm sao để swap 2 biến ?

Có thể nhắc tới 2 cách dễ nhất để swap 2 biến với nhau là:

  • Tạo ra một biến tạm (temp) và swap các biến qua lại với nhau.
  • Sử dụng toán tử số học để swap chúng với nhau.

Ngoài 2 cách phổ biến ở trên ta còn thêm 2 cách khác nữa, đó là sử dụng ES6 (ES2015) Destructuring assignment và toán tử Bitwise XOR.

Xem thêm thông tin cụ thể cho cả 4 cách tại: https://www.programiz.com/javascript/examples/swap-variables

Câu 2: Làm sao để call tới APIs ?

Để call tới APIs trong Javascript có thể kể tới một số cách như:

Câu 3: Mutable với Immutable là gì ?

Hiểu một cách đơn giản thì Mutable là có thể thay đổi, còn Immutable là không thể thay đổi.

Giả sử ta có một biến là mutable, khi thay đổi giá trị của biến copy thì biến gốc cũng có thể bị thay đổi giá trị theo.

Nếu đó là một biến Immutable thì khi thay đổi giá trị của biến copy, biến gốc sẽ không thay đổi.

Xem thêm các bài viết phân tích chi tiết khác:

Câu 4: Callback là gì, ví dụ ?

Callback là một hàm được truyền dưới dạng đối số cho một hàm khác. Hàm callback sẽ chạy sau khi hàm “khác” chạy xong.

Ví dụ về một hàm callback trong javascript

Hàm sayHi sẽ nhận vào 2 tham số đó là namecb, sau khi log ra câu “Hi” nó sẽ gọi làm hàm cb chính là hàm callback của ta.

Kết quả trả về sẽ là:
Hi, tuantvk
This is callback function.

Tại sao lại cần một hàm callback và khi nào thì sử dụng nó ? Bạn có thể xem thêm tại: https://www.simplilearn.com/tutorials/javascript-tutorial/callback-function-in-javascript

Câu 5: Promises là gì, làm sao để tạo một promise ?

Promise là một proxy giúp bạn thực thi các tiến trình bất đồng bộ mà không rơi vào callback hell hay pyramid of doom. Cho phép các phương thức không đồng bộ trả về các giá trị giống như các phương thức đồng bộ.

Một promise sẽ ở 1 trong 3 trạng thái sau:

  • pending: trạng thái ban đầu, không fulfilled hoặc rejected
  • fulfilled: có nghĩa là đã hoàn thành thành công và kết quả là một giá trị
  • rejected: có nghĩa là thất bại và kết quả là một đối tượng lỗi (error object)

Để tạo một promise sử dụng cú pháp:

Câu 6: Pure function là gì, ví dụ ?

Pure function là một hàm luôn trả về cùng một kết quả nếu các tham số đầu vào giống nhau. Nó không phụ thuộc vào bất kì trạng thái, dữ liệu trong quá trình thực thi.

  • Hàm chỉ thao tác được với các biến cục bộ trong hàm
  • Hàm không tạo ra các side effects, như gán lại một biến không nằm bên trong cục bộ

Xem thêm thông tin tại: https://www.scaler.com/topics/pure-function-in-javascript/

Bạn đọc có thể tham khảo thêm các câu hỏi phỏng vấn liên quan tới Javascript tại http://tuantvk.com/danh-sach-nhung-cau-hoi-trong-phong-van-javascript/

3. React

Câu 1: State, Props, Refs là gì ?

State là một biến tồn tại bên trong component và không thể truy cập (accessed) hay chỉnh sửa (modified) từ bên ngoài component. Khi state thay đổi thì component sẽ re-render lại.

Props là các thuộc tính (attributes) khi mà ta truyền dữ liệu từ component cha xuống cho component con. Props là bất biến (immutable).

Refs là một tính năng để có thể truy cập (tham chiếu ) vào DOM (Document Object Model). Trong React điều này có nghĩa giá trị của refs sẽ là một node (React element).

Câu 2: Phân biệt Stateless component và Stateful component ?

Trong React, stateful component là một component chứa một số trạng thái (state). Ngược lại, stateless component là component không có trạng thái (state). Tuy nhiên, cả 2 vẫn có props.

Ví dụ cho 2 component, Store là stateful component và Week là stateless component.

Đọc thêm chi tiết tại: https://www.codecademy.com/learn/react-component-state/modules/react-102-stateless-inherit-stateful-u/cheatsheet

Câu 3: React Lifecycle là gì ? Kể tên và ý nghĩa của chúng theo thứ tự ?

Mỗi một component trong React sẽ trải qua 3 giai đoạn: Mounting, Updating, và Unmounting.

  • Mounting: đẩy (putting) các phần tử vào DOM
  • Updating: cập nhật các trạng thái (state) của component và component sẽ re-render
  • Unmounting: xóa các phần tử ra khỏi DOM

Thứ tự các lifecycle sẽ như sau:
Mounting

  • constructor(): khởi tạo các giá trị ban đầu, state
  • getDerivedStateFromProps(): được gọi (call) trước khi put các phần tử vào DOM
  • render(): đẩy các phần tử vào DOM
  • componentDidMount(): được gọi (call) sau khi đã render xong HTML

Updating

  • getDerivedStateFromProps(): đây sẽ là hàm được gọi đầu tiên sau khi component đã được cập nhật
  • shouldComponentUpdate(): hàm sẽ trả về một Boolean, nếu true component sẽ re-render và ngược lại
  • render(): sau khi trạng thái thay đổi (state), component sẽ re-render
  • getSnapshotBeforeUpdate(): có thể lấy được state hoặc props trước khi nó được cập nhật
  • componentDidUpdate(): được gọi (call) sau khi component đã được cập nhật lại ở DOM

Unmounting

  • componentWillUnmount(): được gọi (call) trước khi các element bị xóa khỏi DOM

Xem thêm thông tin chi tiết tại:

Câu 4: Keys/keyExtractor là gì và tại sao chúng quan trọng ?

Keys/keyExtractor là các thuộc tính chuỗi đặc biệt trong React khi hiển thị các danh sách (list/FlatList). Nó dùng để xác định giữa các phần tử (item) với nhau, và từ đó có thể biết được cái nào đã bị thay đổi, cập nhật hoặc bị xóa.

Điều này dẫn tới các keys/keyExtractor phải riêng biệt, duy nhất (unique).

Có nên sử dụng index để làm key hay không ? Câu trả lời ngắn gọn là không nên nhưng cũng còn tùy trường hợp. Tham khảo tại sao lại như vậy ở 2 bài viết này:

Câu 5: Higher-Order Components (HOC) là gì và sử dụng khi nào ?

Higher-order component cho phép lập trình viên có thể tái sử dụng lại các logic trong component, tránh được những logic lặp lại không cần thiết DRY.

Xem thêm chi tiết và ví dụ: https://blog.logrocket.com/understanding-react-higher-order-components

Câu 6: useEffect là gì và sử dụng như nào ?

useEffect là một hook có trong phiên bản React 16.8 dùng để thực hiện (perform) side effect trong function component.

useEffect giống như sự kết hợp của các lifecycle như componentDidMount, componentDidUpdatecomponentWillUnmount. Nó nhận vào 2 tham số đó là hàm (function) và thành phần phụ thuộc (dependency).

Ví dụ về useEffect, khi biến count (state) tăng lên 1 sau mỗi lần nhấn vào Button useEffect sẽ nhận thấy có sự thay đổi ở thành phần phụ thuộc (dependency) và sẽ chạy lại chính nó log ra đoạn chuỗi.

Xem thêm chi tiết và ví dụ tại: https://www.knowledgehut.com/blog/web-development/how-to-use-react-useeffect

Câu 7: useCallback là gì và sử dụng như nào ?

useCallback là một hook sẽ trả về một memoized của hàm callback và chỉ thay đổi khi thành phần phụ thuộc (dependency) thay đổi. Bạn có thể coi quá trình ghi nhớ (memoization) giống như lưu vào bộ nhớ đệm một giá trị để không cần phải tính toán lại.

Sử dụng useCallback để hạn chế các component re-render không cần thiết.

Để hiểu kĩ hơn về useCallback bạn đọc nên xem thông tin tại:

Câu 8: Một số cách hoặc thư viện dùng để quản lý state trong React ?

Hiện nay có rất nhiều cách hoặc thư viện dùng để quản lý state trong React hay React Native. Có thể kể đến như:

  • Sử dụng React Context
  • Redux
  • Mobx
  • Recoil

Câu 9: Ưu điểm và nhược điểm của Redux và Mobx ?

Câu hỏi này trên thực tế cũng rất khó để so sách Redux và Mobx. Mỗi thư viện lại có những ưu điểm và nhược điểm riêng. Dưới góc độ cá nhân, điều khiến tôi sử dụng Mobx vì nó dễ tiếp cận với người mới.

Bạn có thể tham khảo từ Meta Team qua video: Preethi Kasireddy – MobX vs Redux: Comparing the Opposing Paradigms – React Conf 2017

Xem thêm các bài viết:

4. React Native

Câu 1: StyleSheet.create dùng để làm gì ?

  • Sử dụng StyleSheet.create sẽ giúp bạn validate styles
  • Tạo một stylesheet từ một style object và có thể tham chiếu tới bằng ID thay vì phải tạo mới style object mỗi lần

Câu 2: So sánh giữa Web với Hybrid và Native Applications ?

Ta có thể xem bảng sau để xem sự khác biệt

Web applicationsHybrid applicationsNative applications
Phụ thuộc vào trình duyệt, không phải hệ thống. Sử dụng HTML để xây dựngĐược tạo để sử dụng trên nhiều hệ điều hành và nền tảng. Thường là sự kết hợp giữa HTML và 1 ngôn ngữ khác (Java, Python)Được tạo để chạy trên một hệ điều hành cụ thể. Thường được lập trình bởi các ngôn ngữ Java, Swift, Objective-C
Phản hồi nhanh nhưng trải nghiệm sẽ kém hơn so với native appTrải nghiệm vẫn kém hơn so với native appĐem lại trải nghiệm người dùng tốt nhất
Chi phí rẻ và tiết kiệm thời gianKhông quá tốn kém nhưng dễ bảo trì hơn các native appTốn nhiều chi phí và thơi gian để phát triển cũng như bảo trì

Xem thêm thông tin chi tiết tại https://www.lambdatest.com/blog/web-vs-hybrid-vs-native-apps

Câu 3: Có bao nhiêu threads trong React Native ?

React Native dựa trên 3 threads chính:

  • UI thread (often called main): The only thread that can manipulate host views.
  • JavaScript thread: This is where React’s render phase is executed.
  • Background thread: Thread dedicated to layout.

Xem thêm thông tin tại:

Câu 4: React Native dùng để tạo ra một ứng dụng Mobile Native ?

Đúng

Tại trang chủ của React Native đã nói như vậy :))

“React Native lets you create truly native apps and doesn’t compromise your users’ experiences.”

Xem thêm thông tin tại: https://www.quora.com/Is-React-Native-actually-native

Câu 5: Sự khác nhau giữa sử dụng map và FlatList ?

  • FlatList có chế độ tải chậm (lazy loading – nó chỉ hiển thị những gì trên màn hình, vì vậy nó có thể hoạt động hiệu quả hơn nếu bạn có một danh sách lớn)
  • FlatList cung cấp sẵn các thuộc tính (props) giúp nhanh chóng và tiện lợi hơn trong quá trình phát triển ứng dụng, điều này trái ngược với map

Câu 6: Làm sao để viết code hiển thị riêng cho thiết bị Android hoặc iOS ?

Để hiển thị code riêng cho từng nền tảng ta có thể sử dụng một số cách sau:

  • Sử dụng Platform
  • Tạo tên file với các extensions

Ví dụ:

Xem thêm thông tin chi tiết tại: https://reactnative.dev/docs/next/platform-specific-code

Câu 7: Một số cách để tối ưu ứng dụng React Native ?

Một số cách để tối ưu ứng dụng React Native như:

  • Sử dụng FlatList hoặc SectionList cho những danh sách lớn
  • Xóa tất cả những dòng console
  • Hiển thị kích thước hình ảnh sao cho phù hợp
  • Lưu trữ các hình ảnh ở local
  • Sử dụng các Animated API
  • Xóa những thư viện không cần thiết hoặc không sử dụng
  • Quản lý bộ nhớ
  • Sử dụng Hermes

Việc tối ưu một ứng dụng không hẳn chỉ phụ thuộc vào thư viện mà còn phụ thuộc vào cách ta viết code có “tốt” hay không.

Tham khảo thêm các thông tin khác:

Ngoài ra bạn có thể đọc thêm các bài viết của tôi về React Native:

5. Khác

Câu 1: SSL là gì ?

cloudflare

SSL (Secure Sockets Layer) là tiêu chuẩn của công nghệ bảo mật, truyền thông mã hoá giữa máy chủ Web server và trình duyệt được phát triển bởi Netscape năm 1995.

SSL đảm bảo rằng tất cả các dữ liệu được truyền giữa các máy chủ web và các trình duyệt được mang tính riêng tư, tách rời.

Tham khảo thêm thông tin tại:

Câu 2: Lập trình Hướng đối tượng (OOP) là gì ?

OOP là viết tắt của Object-Oriented Programming dịch ra là lập trình hướng đối tượng. Lập trình hướng đối tượng là kỹ thuật, phương pháp lập trình sử dụng các đối tượng (objects) để xây dựng ứng dụng.

Đọc toàn bộ bài viết ở đây https://viblo.asia/p/lap-trinh-huong-doi-tuong-oop-L4x5xJxrZBM

6. Tổng kết

Như vậy là ta đã đi qua những câu hỏi phỏng vấn phổ biến liên quan tới thuật toán, javascript, react, react native. Tuy nhiên tôi muốn bạn đọc phải thực sự hiểu vấn đề, nắm được cốt lõi chứ không phải là học thuộc lòng để đi “kiểm tra miệng”.

Hy vọng bài viết này hữu ích với bạn. Nếu thấy hay bạn có thể chia sẻ tới mọi người.

Cảm ơn bạn đã đọc bài viết này !