Logo

101 câu hỏi phỏng vấn ReactJS thường gặp và gợi ý trả lời

Lượt xem: 991
Ngày đăng: 17/03/2024

Tổng hợp các câu hỏi phỏng vấn ReactJS fresher/Intern, Junior, Senior thường gặp và gợi ý trả lời. Nếu bạn đang chuẩn bị ứng tuyển vào một vị trí nào đó của một công ty phần mềm thì đừng bỏ qua bài viết này. 

101 câu hỏi phỏng vấn ReactJS thường gặp và gợi ý trả lời

>> Xem ngay: 1001 câu hỏi phỏng vấn thường gặp và cách trả lời hay nhất - Kinh nghiệm phỏng vấn ViecLamVui

Những câu hỏi phỏng vấn cơ bản về ReactJS

Những câu hỏi phỏng vấn ReactJS fresher/Intern thường là các câu hỏi đơn giản, cơ bản về kiến thức ReactJS. Sau đây là những câu hỏi phỏng vấn cơ bản về ReactJS dành cho các bạn fresher/Intern tham khảo.

Những câu hỏi phỏng vấn cơ bản về ReactJS

ReactJS là gì?

ReactJS hay còn được gọi là React là thư viện JavaScript front-end phổ biến trong lĩnh vực phát triển web. ReactJSrất hữu ích trong việc phát triển giao diện người dùng, để xây dựng giao diện người dùng nhanh và tương tác cho các ứng dụng web và di động.

React trở nên phổ biến nhờ vào các tính năng nổi bật như: có thể được dùng để phát triển cả ứng dụng web và ứng dụng di động, luồng dữ liệu một chiều, các components có thể tái sử dụng, tạo các ứng dụng động, ...

JSX là gì?

JSX là viết tắt của JavaScript XML. JSX cho phép chúng ta viết HTML bên trong JavaScript và đặt chúng trong DOM mà không cần sử dụng các hàm như appendChild () hoặc createElement ().

DOM ảo là gì?

DOM (virtual DOM)  viết tắt của Document Object Model. DOM là một đại diện được nằm trong bộ nhớ cho một thành phần HTML thật mà cấu thành nên giao diện cho chương trình. Khi một component được thông dịch lại (re-render), DOM ảo sẽ so sánh sự thay đổi với mô hình của DOM thật để tạo một danh sách cập nhật sẽ được thực hiện. Lợi ích chính của việc này là giúp tăng hiệu năng, chỉ tập trung vào các thay đổi nhỏ và thực sự cần thiết với DOM thật hơn là phải re-render lại một tập component lớn.

Các trình duyệt web có đọc JSX một cách trực tiếp được không?

Câu trả lời là không. Vì chúng được xây dựng để chỉ đọc các đối tượng JS thông thường và JSX không phải là một đối tượng JavaScript thông thường.

Để trình duyệt web có thể đọc được tệp JSX, tệp cần được chuyển đổi thành một đối tượng JavaScript thông thường. Để làm điều này, cần phải sử dụng Babel.

Vì sao nên sử dụng React thay vì các framework khác, ví dụ như Angular?

  • Dễ dàng tạo các ứng dụng động: React giúp tạo các ứng dụng web động dễ dàng hơn vì ít code hơn mà lại cung cấp nhiều chức năng hơn, trong khi với các ứng dụng JavaScript, cách code thường có xu hướng trở nên phức tạp.
  • Hiệu suất cải thiện: React sử dụng DOM ảo, giúp các ứng dụng web hoạt động nhanh hơn. Virtual DOM so sánh trạng thái trước đó của nó và chỉ cập nhật các thành phần có trạng thái thay đổi trong DOM thực thay vì cập nhật tất cả các thành phần, như các ứng dụng web thông thường.
  • Các thành phần có thể tái sử dụng: Các components là nền tảng của bất kỳ ứng dụng React nào và một ứng dụng đơn lẻ thường bao gồm nhiều components. Các components này có logic và các điều khiển riêng và chúng có thể được tái sử dụng thông qua ứng dụng, do đó làm giảm đáng kể thời gian phát triển một ứng dụng.
  • Luồng dữ liệu một chiều: React tuân theo luồng dữ liệu một chiều. Có nghĩa là khi thiết kế một ứng dụng React, chúng ta thường lồng các thành phần con vào bên trong các thành phần mẹ. Và vì dữ liệu chảy theo một hướng, nên việc debug và biết vấn đề xảy ra ở đâu trong ứng dụng sẽ trở nên dễ dàng hơn.
  • Các công cụ chuyên dụng để debug dễ dàng: Facebook đã phát hành một tiện ích mở rộng Chrome mà chúng ta có thể sử dụng để debug các ứng dụng React. Điều này làm cho quá trình gỡ lỗi React cho các ứng dụng web nhanh hơn và dễ dàng hơn.

Giải thích React state và props

React state: Mỗi thành phần trong react đều có một đối tượng trạng thái được tạo sẵn, chứa tất cả các giá trị thuộc tính của thành phần đó. Nói cách khác, React state kiểm soát hành vi của một thành phần. Bất kỳ thay đổi nào trong các React state của đối tượng trạng thái đều dẫn đến việc hiển thị lại thành phần.

React Props: Mọi thành phần React chấp nhận một đối số đối tượng duy nhất được gọi là props (viết tắt của "thuộc tính"). Các props này có thể được chuyển cho một thành phần bằng cách sử dụng các thuộc tính HTML và thành phần chấp nhận các props này như một đối số. Sử dụng props, bạn có thể truyền dữ liệu từ component này sang component khác.

React Hooks là gì?

React Hooks là các hàm tích hợp cho phép các nhà phát triển sử dụng các phương thức trạng thái và vòng đời trong các thành phần React. Đây là những tính năng mới được bổ sung có sẵn trong phiên bản React 16.8. Mỗi vòng đời của một thành phần có 3 giai đoạn bao gồm gắn kết, ngắt kết nối và cập nhật. 

Cùng với đó, các thành phần có thuộc tính và trạng thái. Hooks sẽ cho phép các nhà phát triển sử dụng các phương pháp này để cải thiện việc tái sử dụng mã với tính linh hoạt cao hơn trong việc điều hướng cây thành phần.

Sự kiện (Event) trong React là gì?

Sự kiện (Event) trong React là hành động mà người dùng hoặc hệ thống có thể kích hoạt bằng cách nhấn phím, nhấp chuột,... Các sự kiện React được đặt tên bằng camelCase, thay vì chữ viết thường, không in hoa trong HTML.

Sự kiện tổng hợp (Synthetic event) trong React là gì?

Sự kiện tổng hợp (Synthetic event) kết hợp phản hồi của các sự kiện gốc của trình duyệt khác nhau thành một API, đảm bảo rằng các sự kiện nhất quán trên các trình duyệt khác nhau.

Keys được dùng để làm gì?

Khi thực hiện render một tập hợp trong React, việc thêm một key cho mỗi thành phần được lặp lại là cần thiết để giúp React theo dấu mối liên kết giữa các thành phần và dữ liệu. Key nên là một ID duy nhất, lý tưởng nhất nên là một UUID hay một chuỗi duy nhất khác từ tập hợp phần tử, hoặc cũng có thể là index của array.

Không dùng key có thể dẫn đến một vài sự thay đổi lạ khi thêm và xóa các phần tử từ tập hợp.

Form (biểu mẫu) trong React là gì?

Form (biểu mẫu) trong React cho phép người dùng tương tác với các ứng dụng web. Sử dụng form, người dùng có thể tương tác với ứng dụng và nhập thông tin cần thiết. Form chứa các phần tử nhất định như trường văn bản, nút, hộp kiểm, nút radio, ... Form được sử dụng cho nhiều tác vụ khác nhau như xác thực người dùng, tìm kiếm, lọc, lập chỉ mục, ...

Hàm mũi tên (arrow function) là gì và cách sử dụng trong React?

Hàm mũi tên (arrow function) là một cách viết ngắn gọn của một hàm trong React. Không cần ràng buộc ‘this’ bên trong phương thức khởi tạo khi sử dụng hàm mũi tên. Điều này ngăn chặn các bug do sử dụng ‘this’ trong các lệnh Callback trong React.

So sánh React và React Native

  React React Native
Năm phát hành 2013 2015
Nền tảng Web Mobile – Android, iOS
HTML Không
CSS Không
Yêu cầu JavaScript, HTML, CSS React.js

So sánh React và Angular

  Angular React
Tác giả Google Facebook
Mô hình Mô hình MVC toàn diện Các lớp (layer) MVC
DOM DOM thực DOM ảo (Virtual DOM)
Liên kết dữ liệu Hai chiều Đơn chiều
Rendering Client-Side Server-Side
Hiệu suất Khá chậm Nhanh hơn nhờ DOM ảo

Định nghĩa Refs trong React

Refs là viết tắt của References (Tham chiếu) trong React. Nó giúp cho việc lưu một tham chiếu đến một nguyên tố react cụ thể hay một thành phần có thể được trả về bởi hàm cấu hình render thành phần (component render configuration function).

Định nghĩa Sự kiện ảo (Synthetic Events) trong React?

Các Sự kiện ảo trong React là các đối tượng trong React hoạt động như một trình bao bọc liên trình duyệt xung quanh các sự kiện cục bộ của trình duyệt (browser's native event). Mục đích chính là gộp các trình duyệt khác nhau trên API để sự kiện hiện lên nhiều đặc tính.

Thành phần stateful là gì ?

Một thành phần stateful chứa các thay đổi trong bộ nhớ đến React. Nó có quyền thay đổi state và chứa các thông tin cốt yếu về các thay đổi trong quá khứ, hiện tại và tương lai.

Khái niệm về states trong React?

States trong React hoạt động như một nguồn dữ liệu để các đối tượng quyết định quá trình render và hành vi của các thành phần trở nên có thể biến đổi ngoài props và phát triển các thành phần tương tác động.

Câu hỏi phỏng vấn ngôn ngữ lập trình .ReactJS nâng cao

Câu hỏi phỏng vấn junior ReactJS, câu hỏi phỏng vấn ReactJS senior là các câu hỏi phỏng vấn dành cho những người đã có kinh nghiệm, những người muốn ứng tuyển vào vị trí quản lý, giỏi chuyên môn. Sau đây là những câu hỏi phỏng vấn ngôn ngữ lập trình .ReactJS nâng cao.

Câu hỏi phỏng vấn ngôn ngữ lập trình .ReactJS nâng cao

Kể tên các kỹ thuật để tối ưu hóa hiệu suất ứng dụng React

Sử dụng useMemo () Là một móc React được sử dụng để lưu vào bộ đệm các chức năng đắt tiền của CPU. Đôi khi trong ứng dụng React, chức năng Đắt CPU được gọi liên tục do kết xuất một thành phần, điều này có thể dẫn đến kết xuất chậm. useMemo () hook có thể được sử dụng để cache các hàm như vậy. Bằng cách sử dụng useMemo (), hàm Chi phí CPU chỉ được gọi khi cần thiết.
Sử dụng React.PureComponent Là một lớp thành phần cơ sở kiểm tra trạng thái và props của một thành phần để biết liệu thành phần đó có nên được cập nhật hay không. Thay vì sử dụng React.Component đơn giản, chúng ta có thể sử dụng React.PureComponent để giảm các kết xuất của một thành phần không cần thiết.
Lazy Load  Là một kỹ thuật được sử dụng để giảm thời gian tải của một ứng dụng React. Lazy Load giúp giảm nguy cơ hiệu suất ứng dụng web đến mức tối thiểu.

Tại sao phải goi setState thay vì trực tiếp thay đổi state?

Nếu cố gắng thay đổi một state của component trực tiếp, React sẽ không thể biết được khi nào nó cần phải re-render component. Bằng cách sử dụng phương thức setState(), React có thể cập nhật component của UI.

Nếu cần cập nhật một state của component dựa theo dữ liệu của state khác hay props khác, chỉ cần truyền một hàm vào setState()

So sánh Class components và Functional components?

  Class Components Functional Components
State Có thể giữ hoặc quản lý state Không thể giữ hoặc quản lý state
Độ đơn giản Phức tạp hơn so với stateless component Đơn giản và dễ hiểu
Lifecycle methods Có thể hoạt động với tất cả lifecycle methods Không thể hoạt động với lifecycle method nào
Khả năng tái sử dụng Có thể Không thể

Props drilling là gì? Cách để phòng tránh nó?

Prop drilling là điều xảy ra khi cần truyền dữ liệu từ một component cha xuống một component thấp hơn trong cây component, drilling - khoan vào các component khác mà các component đấy có thể không cần giá trị props, trong khi chỉ một vài component là cần thôi.

Thỉnh thoảng vấn đề prop drilling có thể được phòng tránh bằng việc refactor component, tránh việc chia component thành nhỏ hơn và giữ các state chung vào trong component cha chung gần nhất. Với việc bạn cần chia sẻ state giữa các component mà không phụ thuộc vào vị trí xa hay gần trong cây component, bạn có thể sử dụng React Context API hay thư viện quản lý state tập trung _ vd như Redux.

Cách tiếp cận phổ biến để style ứng dụng React?

Inline styling Rất hữu ích cho việc sửa style, nhưng có nhiều giới hạn ( vd: không style được các class giả )
Class based CSS styles Nhiều tính năng hữu ích hơn inline styling và phù hợp với các nhà phát triển mới
CSS in JS styling Có nhiều thư viện cho phép style được định nghĩa như Javascript trong components, và chúng ta thao tác giống như code JS thông thường

Các giai đoạn khác nhau trong vòng đời của thành phần React component là gì?

Có bốn giai đoạn khác nhau trong vòng đời của thành phần React component, bao gồm:

  1. Khởi tạo: Giai đoạn này, thành phần React sẽ thiết lập các đạo cụ mặc định và trạng thái ban đầu cho cuộc hành trình khó khăn sắp tới.
  2. Gắn kết: Gắn kết đề cập đến việc đưa các phần tử vào DOM của trình duyệt. Vì React sử dụng VirtualDOM, nên toàn bộ DOM của trình duyệt hiện đã được hiển thị sẽ không được làm mới. Giai đoạn này bao gồm các phương thức vòng đời componentWillMount và componentDidMount.
  3. Đang cập nhật: giai đoạn này, một thành phần sẽ được cập nhật khi có sự thay đổi về trạng thái hoặc props của một thành phần. Giai đoạn này sẽ có các phương thức vòng đời như componentWillUpdate, shouldComponentUpdate, render và componentDidUpdate.
  4. Ngắt kết nối: Giai đoạn cuối cùng này của vòng đời thành phần, thành phần sẽ bị xóa khỏi DOM hoặc sẽ được ngắt kết nối khỏi DOM của trình duyệt. Giai đoạn này sẽ có phương thức vòng đời được đặt tên là componentWillUnmount.

So sánh Định tuyến React (React routing) với định tuyến quy ước (conventional routing)

Định tuyến React Định tuyến quy ước
Trang HTML đơn Mỗi view là một tệp HTML mới
Người dùng điều hướng nhiều chế độ xem trong cùng một tệp Người dùng điều hướng nhiều tệp cho mỗi chế độ xem
Trang không làm mới vì nó là một tệp duy nhất Trang làm mới mỗi khi người dùng điều hướng
Cải thiện hiệu suất Hiệu suất chậm hơn

Giải thích cách sử dụng CSS modules trong React

Tệp CSS module được tạo ra bởi .module.css extension. CSS bên trong một tệp module chỉ có sẵn cho components đã nhập nó, vì vậy không có xung đột đặt tên trong khi style cho các components.

React Hook có hoạt động với tính năng nhập tĩnh không?

Nhập tĩnh đề cập đến quá trình kiểm tra mã trong thời gian biên dịch để đảm bảo tất cả các biến sẽ được nhập tĩnh. React Hooks là các hàm được thiết kế để đảm bảo tất cả các thuộc tính phải được nhập tĩnh. Để thực thi nhập tĩnh chặt chẽ hơn trong mã bạn có thể sử dụng API React với các Hook tùy chỉnh.

Hiệu suất của việc sử dụng Hooks sẽ khác như thế nào so với các lớp?

React Hooks sẽ tránh được rất nhiều chi phí như tạo cá thể, liên kết các sự kiện,.. có trong các lớp. Các hook trong React sẽ tạo ra các cây thành phần nhỏ hơn vì chúng sẽ tránh được việc lồng nhau tồn tại trong HOC (Các thành phần thứ tự cao hơn) và sẽ hiển thị các props dẫn đến việc React phải thực hiện ít công việc hơn.

React Router là gì?

React Router là một hệ thống thư viện định tuyến tiêu chuẩn được xây dựng trên React. Nó được dùng để tạo Định tuyến trong ứng dụng React bằng Bộ định tuyến React. Nó giúp bạn xác định nhiều tuyến đường trong ứng dụng. Nó cung cấp URL đồng bộ trên trình duyệt với dữ liệu sẽ được hiển thị trên trang web. Ngoài ra, React Router cũng giúp duy trì cấu trúc và hành vi tiêu chuẩn của ứng dụng và chủ yếu được sử dụng để phát triển các ứng dụng web trang đơn.

Giải thích kết xuất có điều kiện trong React

Kết xuất có điều kiện đề cập đến đầu ra động của các đánh dấu giao diện người dùng dựa trên trạng thái điều kiện. Nó hoạt động theo cách tương tự như các điều kiện JavaScript. Sử dụng kết xuất có điều kiện, bạn có thể chuyển đổi các chức năng ứng dụng cụ thể, kết xuất dữ liệu API, ẩn hoặc hiển thị các phần tử, quyết định cấp độ quyền, xử lý xác thực, ...

Có nhiều cách tiếp cận khác nhau để triển khai kết xuất có điều kiện trong React, như:

  • Sử dụng logic có điều kiện if-else phù hợp cho các ứng dụng nhỏ hơn cũng như cho các ứng dụng cỡ vừa
  • Sử dụng toán tử bậc ba, giúp loại bỏ một số phức tạp từ các câu lệnh if-else
  • Sử dụng các biến phần tử, điều này sẽ cho phép bạn viết mã sạch hơn.

React Hook có thể thay thế Redux không?

React Hook không được xem là giải pháp thay thế cho Redux (Redux là một thư viện mã nguồn mở, JavaScript hữu ích trong việc quản lý trạng thái ứng dụng). Khi đề cập đến việc quản lý cây trạng thái ứng dụng toàn cầu trong các ứng dụng phức tạp lớn, mặc dù React sẽ cung cấp một hook useReducer giúp quản lý các chuyển đổi trạng thái giống như Redux. 

Redux cũng sẽ hữu ích ở cấp độ thấp hơn của hệ thống phân cấp thành phần để xử lý các phần của trạng thái phụ thuộc vào nhau, thay vì khai báo nhiều hook useState. Trong các ứng dụng web thương mại lớn hơn, độ phức tạp sẽ cao, vì vậy chỉ sử dụng React Hook có thể không đủ. 

Giải thích khái niệm Flux

Flux là một kiến trúc ứng dụng được Facebook dùng để xây dựng ứng dụng web phía máy khách với React. Nó không phải là một thư viện cũng không phải là một framework. Nó là một loại kiến trúc bổ sung cho React và tuân thủ theo định nghĩa của mô hình Luồng dữ liệu đơn hướng. Nó rất hữu ích khi dự án có dữ liệu động và bạn cần cập nhật dữ liệu một cách hiệu quả.

Ngữ cảnh (context) trong React.js là gì?

Context cung cấp một cách thức để truyền dữ liệu qua cây thành phần (component tree) mà không phải chuyển các Props xuống theo cách thủ công ở mọi cấp độ. Ví dụ thông tin user đã đăng nhập, tùy chọn ngôn ngữ, UI Theme cần được truy cập trong ứng dụng bởi nhiều component.

Store trong Redux là gì

Store trong Redux là một đối tượng JavaScript có thể giữ trạng thái của các ứng dụng để truy cập và thực hiện các dispatch action cùng với các register listener.

Nêu các lợi ích của HOC

HOC có một số các lợi ích như sau:

  • Sử dụng lại Code.
  • Ứng dụng logic và bootstrap abstraction
  • Cung cấp phương tiện hacking cấp độ cao
  • Hỗ trợ thao tác và state abstraction
  • Cung cấp thao tác props

Định nghĩa HOC trong React

HOC viết đầy đủ là Higher-Order Component. Đây là một kĩ thuật nâng cao để sử dụng lại các logic thành phần (component logic), mà gói các thành phần khác cùng với nó.

Thành phần không được kiểm soát (uncontrolled components) khác với thành phần được kiểm soát như thế nào?

Các thành phần không được kiểm soát duy trì state của chúng, và dữ liệu của chúng được kiểm soát bởi DOM. Các Refs được sử dụng trong thành phần không được kiểm soát để lấy các giá trị hiện tại của chúng thay vì sử dụng props như đối với thành phần được kiểm soát.

Thành phần được kiểm soát (controlled components) trong React là gì

Thành phần được kiểm soát trong React là các thành phần có thể duy trì state của chúng. Dữ liệu được kiểm soát bởi thành phần cha của chúng, và chúng xét các giá trị hiện tại sử dụng props và thereafter, thông báo về các thay đổi sử dụng callback.

Có thể modulue hóa code trong React không? Và làm như thế nào?

Có, chúng ta có thể module hóa code trong React. Có thể thực hiện bằng cách sử dụng các đặc tính export và import.

Refs chủ yếu được sử dụng khi nào

Trả lời: Refs chủ yếu được sử dụng trong các trường hợp sau:

  1. Khi cần quản lý tập trung, chọn văn bản, chạy các tệp đa phương tiện.
  2. Để khởi tạo các hoạt ảnh cần thiết.
  3. Để nối với các thư viện DOM của bên thứ ba.

Thành phần khác với thành phần stateful như thế nào ?

Thành phần stateless tính toán các thay đổi bên trong thnàh phần nhưng không có quyền thay đổi state. Nó không có các tri thức về quá khứ, hiên tại và tương lai nhưng lại nhận props từ thành phần stateful, và đó được coi là hàm callback.

Có thể thay đổi bên trong các thành phần con không ?

Có, chúng ta có thể thay đổi bên trong các thành phần con trong props nhưng không thể thay đổi trong states.

React có hạn chế nào không

React có một vài hạn chế bao gồm :

  • Nó hoạt động như một thư viện, không phải là framework.
  • Nội dung của thư viện là rất lớn nên phải mất một khoảng thời gian dài để có thể hiểu được.
  • Khó hiểu đối với người mới học.
  • Quá trình code trở nên phức tạp hơn khi inline template và JSX được áp dụng.

Bạn hiểu về props trong React như thế nào

Props là viết tắt của Properties (đặc tính) trong React. Những thành phần chỉ đọc này cần phải được giữ bất biến (hay thuần khiết). Trong ứng dụng, props được chuyển từ các thành phần cha đến các thành phần con.

Để duy trì luồng dữ liệu một hướng, một thành phần con bị hạn chế gửi prop trở lại thành phần cha của nó. Điều này cũng giúp cho quá trình render các dữ liệu động được tạo ra.

Bạn sẽ đặt các cuộc gọi AJAX ở đâu trong code React của bạn?

Có thể sử dụng bất kì thư viện AJAX nào với React, chẳng hạn như Axios, jQuery AJAX, và trình duyệt window.fetch được tích hợp sẵn.

Dữ liệu với các cuộc gọi AJAX cần được thêm vào componentDidMount() lifecycle method. Bằng cách này, có thể sử dụng setState() method để cập nhật các thành phần ngay khi dữ liệu được lấy về.

Bạn hiểu Component trong React như thế nào?

Component trong ReactJS hay các thành phần chính là các cấu trúc cốt lõi của React. Dễ hiểu hơn thì mọi ứng dụng bạn sẽ phát triển trong React được tạo thành từ các phần được gọi là Component. Các Component này làm việc xây dựng UIs trở nên dễ dàng hơn rất nhiều.

Giao diện người dùng được chia thành nhiều phần riêng lẻ được gọi là các Component và chúng hoạt động độc lập. Khi hợp nhất tất cả các Component riêng lẻ này thì ta sẽ nhận được giao diện người dùng cuối cùng. 

1001 CÂU HỎI PHỎNG VẤN

Tổng hợp các câu hỏi phỏng vấn ReactJS fresher/Intern, Junior, Senior thường gặp và gợi ý trả lời. Nếu bạn đang chuẩn bị ứng tuyển vào một vị trí nào đó của một công ty phần mềm thì đừng bỏ qua bài viết này.

Trên đây là 101 câu hỏi phỏng vấn ReactJS thường gặp và gợi ý trả lời ViecLamVui - chuyên trang tìm việc làm miễn phí - gửi đến bạn. Hy vọng tài liệu trên có thể hỗ trợ các bạn thật hiệu quả.