Đi đôi với sự phát triển không ngừng của thời đại, React đã trở thành một trong những ngôn ngữ lập trình được các nhà tuyển dụng săn đón hàng đầu. Dưới đây là tổng hợp hơn 40+ câu hỏi phỏng vấn ReactJS theo mức độ từ dễ đến khó thường được sử dụng trong các buổi phỏng vấn ứng viên. Cùng tham khảo ngay các bí quyết trả lời hay để mang về kết quả tốt nhất nhé!
Những câu hỏi phỏng vấn Reactjs cơ bản nhất
Các câu hỏi phỏng vấn ReactJS phổ biến mà nhà tuyển dụng hay đặt ra để kiểm tra kiến thức và mức độ hiểu biết, xử lý vấn đề của bạn như sau:
Làm thế nào để khởi tạo một ứng dụng React?
Để khởi tạo ứng dụng React, bạn cần thực hiện theo 3 bước đơn giản sau:
Bước 1: Tiến hành cài đặt NodeJS trên máy tính/PC. Vì cần Npm để cài đặt thư viện React. Npm có chức năng là trình quản lý gói node chứa nhiều thông tin thư viện JavaScript, và cả bao gồm React.
Bước 2: Tiếp tục cài đặt gói create-react-app bằng terminal hoặc command prompt
Bước 3: Cài đặt một trình soạn thảo văn bản mà bạn chọn, như VS Code hoặc Sublime Text.
Event trong React là gì và được sử dụng ra sao?
Trong React, các sự kiện (event) là hành động mà user hoặc hệ thống có thể kích hoạt, ví như như click chuột hoặc nhấn bàn phím,…
Trong đó, các React even sẽ thường đặt tên bằng cách sử dụng camelCase hay vì các ký tự chữ thường trong HTML. Ngược lại với JSX, bạn nên chuyển một function để xử lý event thay vì một chuỗi trong HTML.
Bạn có thể tạo một event trong React như thế nào?
Một event trong React bạn có thể khởi tạo như sau:
Synthetic events trong React là gì?
Synthetic event hay còn gọi là sự kiện tổng hợp bằng cách kết hợp phản hồi từ các sự kiện gốc của trình duyệt tạo thanh API. Từ đó, đảm bảo các sự kiện mang đến tính nhất quán tại các trình duyệt khác nhau.
Những tính năng nổi bật của React là gì?
Các tính năng nổi bật của React sẽ bao gồm các phần chính như: JSX, Components, Virtual DOM, One-way data-binding, High performance. Và trên mỗi tính năng sẽ xử lý một tác vụ khác nhau. Cùng xem tiếp để hiểu rõ hơn nhé!
JSX có nghĩa là gì?
JSX là một trong những cú pháp mở rộng của JavaScript, nó được kết hợp với React để mô tả chính xác hơn về giao diện người dùng trông như thế nào. Bằng cách dùng JSX, chúng ta sẽ viết các cấu trúc HTML trong cùng một tệp chứa mã JavaScript.
Các trình duyệt có thể đọc JSX trực tiếp không?
Câu trả lời là trình duyệt web không thể đọc JSX trực tiếp. Điều này có thể do chúng được phát triển chỉ để đọc các đối tượng JS thông thường và JSX lúc này không phải là một đối tượng JavaScript thông thường.
Một cách tối ưu nhanh hơn để trình duyệt web có thể đọc được JSX là, lúc này tệp nên được chuyển đổi thành một đối tượng JavaScript thông thường và để thực hiện, bạn có thể sử dụng Babel.
Virtual DOM trong React là gì?
DOM được viết tắt từ Document Object Model là một đại diện cho tài liệu HTML có cấu trúc cây logic. Tại mỗi nhánh cây có thể kết thúc bằng một nút hoặc mỗi nút đều chứa các đối tượng.
Trong đó, React có vai trò giữ một bản “đại diện” nhưng nhẹ hơn của DOM “thực tế” trong phần bộ nhớ, gọi là DOM ảo (Virtual DOM). Trường hợp, khi trạng thái của một object (đối tượng) thay đổi, DOM ảo chỉ thay đổi đối tượng trong DOM thực thay vì phải cập nhật lại tất cả đối tượng,
Tại sao nên sử dụng React thay vì các framework khác như Angular?
| Lợi ích | Chi tiết |
| Tạo dễ dàng các ứng dụng động hơn | – Cung cấp ít mã hóa đơn và nhiều chức năng hơn. – Trong đó, ứng dụng JavaScript lại thường sử dụng phức tạp và bị hạn chế hơn |
| Tăng hiệu suất tốt hơn | – Nhờ việc sử dụng virtual DOM của Reac đã giúp các ứng dụng web trở nên hoạt động nhanh hơn. – Một phần vì so với trạng thái trước, phần thay đổi chỉ có tại real DOM thay vì phải cập nhật lại tất cả các thành phần như web thường. |
| Có thể tái sử dụng các thành phần | – Components là nền tảng xây dựng cơ bản trên bất kỳ các ứng dụng React và các ứng dụng đơn lẻ nào. Thường bao gồm nhiều components. – Trong các component sẽ có nghĩa vụ logic và điều khiển riêng, có thể được dùng lại thông qua ứng dụng. Nhờ đó sẽ làm giảm đi đáng kể thời gian phát triển của một ứng dụng. |
| Luồng data một chiều | – Thông thường React sẽ tuân thủ theo luồng data một chiều. Vì vậy, khi thiết kế ứng dụng React, bạn cần lồng component con vào trong các component mẹ. Nhờ việc data theo một luồng thống nhất nên việc kiểm tra lỗi và vấn đề sẽ dễ dàng hơn. |
| Công cụ chuyên dụng dễ dàng debug | – Hiện nay, Meta đã phát hành một tiện ích tối ưu mới có thể sử dụng để gỡ lỗi ứng dụng React. Điều này giúp thúc đẩy quá trình debug trở nên đơn giản và nhanh hơn. |
ES6 khác gì so với ES5?
Để giải thích cụ thể hơn, bạn có thể xem chi tiết sự khác biệt của ES6 và ES5:
- Xét về Components và Function
- Exports và Export
- Require vs Import
List trong React hoạt động như thế nào?
Để hoạt động list trong React, hãy tiến hành tạo list React như đã triển khai trong JavaScript . List có nhiệm vụ hiển thị dữ liệu ở định dạng có thứ tự và việc list được duyệt thông qua sử dụng hàm map().
Tại sao cần sử dụng keys trong Lists?
Keys trong Lists là một phần rất quan trọng bởi vì các nguyên nhân như:
- Keys lúc này là một dạng định danh độ nhất và được dùng để xác định những mục nào đã bị thay đổi, cập nhật hay bị xóa ra khỏi danh sách.
- Phần còn lại là giúp key xác định được thành phần components nào sẽ cần được hiển thị lại.
Form trong React là gì và được tạo như thế nào?
Form trong React giúp người dùng có thể dễ dàng hơn trong việc tương tác với các ứng dụng wb. Việc sử dụng form, người dùng cũng có thể tương tác trực tiếp ứng dụng và nhập các thông tin cần thiết khi cần.
Cùng với đó, Form còn có chức năng dùng cho nhiều tác vụ như xác thực người dùng, tìm, lọc và lập chỉ mục nhanh chóng hơn,…
Làm thế nào để viết comments trong React?
Việc viết comments trong React sẽ chia làm 2 kiểu phổ biến như:
- Viết một dòng
- Viết nhiều dòng
Hàm arrow là gì và nó được dùng như thế nào trong React?
Hàm arrow hay còn gọi ngắn gọn là hàm mũi tên là cách viết ngắn gọn nhất của một hàm trong React.
Khi không cần phải ràng buộc “this” bên trong phương thức khởi tạo hàm arrow. Điều này sẽ giúp ngăn các bug do sử dụng “this” ở các lệnh Callback bên trong React.
Sự khác biệt giữa React và React Native là gì?
Sự khác biệt cơ bản giữa React và React Native cụ thể như sau:
| React | React Native | |
| Năm ra mắt | 2013 | 2015 |
| Platform | Web | Mobile – Android và iOS |
| HTML | Có | Không |
| CSS | Có | Không |
| Các yêu cầu | JavaScript, HTML và CSS | React.js |
React khác với Angular như thế nào?
Đối với React và Angular cơ bản có sự khác biệt như sau:
| React | Angular | |
| Nền tảng | ||
| Mô hình | Các lớp layer MVC | MVC toàn diện |
| DOM | Virtual DOM | real DOM |
| Data liên kết | Một chiều | Hai chiều |
| Rendering | Server-Side | Client-Side |
| Hiệu năng xử lý | Nhờ SOM ảo nên nhanh hơn | Chậm hơn |
Những câu hỏi phỏng vấn ReactJS và Redux
Ngoài so sánh về sự khác việt thì các câu hỏi phỏng vấn ReactJS và Redux cũng thường được hỏi như:
Redux là gì?
Redux là công cụ quản lý trạng thái state management phổ biến trong thư viện JavaScript, đặc biệt là khi kết hợp với React.
Ngoài việc là nơi cung cấp lưu trí tập trung cho toàn bộ dữ liệu trong ứng dụng, chúng còn giúp các component dễ dàng truy cập và cập nhật dữ liệu hơn và vì thế, góp phần thúc đẩy Redux dễ dự đoán, bảo trì và kiểm tra nhanh chóng hơn.
Các thành phần chính của Redux là gì?
Các thành phần chính của Redux bao gồm chủ yếu như: Store, action và reducer
- Store: Giúp giữ các state của ứng dụng
- Action: Đây là nguồn thông tin của store
- Reducer: Xác định các state của ứng dụng thay đổi theo hành để để gửi đến store
Flux là gì?
Flux là kiến trúc mà Facebook sử dụng để xây dựng nên các web app. Đây được xem là phương pháp xử lý dữ liệu phức tạp từ bên trong ứng dụng, phía máy khách và quản lý các chiều data của ứng dụng React.
Trong đó, có một nguồn store kích hoạt một số hành động nhất định là cách để cập nhật chúng.
Tiếp theo, câu lệnh đã được kích hỏa và dữ liệu store cập nhật, nó sẽ phát ra một event thay đổi mà các chế độ có thể hiển thị tương ứng.
Điểm khác biệt giữa Redux và Flux là gì?
Sự khác nhau giữa Redux và Flux cụ thể như sau:
| Redux | Flux | |
| 1 | – Redux là mã nguồn mở của thư viện JavaScript có chức năng dụng để quản lý trạng thái. | – Flux chỉ là một kiến trúc, không phải framework hay thư viện |
| 2 | Store bất biến | Store tùy biến |
| 3 | Chỉ chứa 1 Store | Tùy chứa nhiều Store |
| 4 | Dùng reducer | Dùng dispatcher |
Những câu hỏi phỏng vấn ReactJS Router thường gặp
Ngoài ra, khi nhắc đến ReactJS Router thì sẽ có các câu hỏi liên quan phỏng vấn ReactJS cơ bản như sau:
React Router là gì?
React Router là thư viện định tuyến được xây dựng trên React nhằm để tạo ra các tuyến trong một ứng dụng React.
Tại sao cần sử dụng React Router?
Các nguyên nhân cơ bản cần để sử dụng React Router chính là:
- Giúp duy trì sự nhất quán của cấu trúc và hành vi được phát triển trên các ứng dụng web single-page.
- Ngoài ra, chính sẽ cho phép nhiều chế độ xem trong một ứng dụng bằng cách các định được nhiều tuyến bên trong ứng dụng React đó.
Làm cách nào để triển khai React routing?
Cách để triển khai React routing trong ứng dụng React bằng phương pháp cơ bản sau:
Giả sử trong trường hợp chúng ta có các components như: App, About, Contact trong ứng dụng
Những câu hỏi phỏng vấn về ReactJS Components
Ngoài ra, khi hỏi đến ReactJS Components sẽ có các câu tương tự như:
Component là gì?
Components là nền tảng xây dựng của bất kỳ ứng dụng React nào và được kết hợp với các phần khác nhau chẳng hạn ứng dụng đơn lẻ thường bao gồm nhiều components.
Trong đó, một component nó chia giao diện người dùng thành các phần độc lập, có thể tái sử dụng và xử lý được riêng.
Component còn được chia làm 2 loại chính bao gồm: Functional Components và class components
- Functional Components: Loại này sẽ không có sate của riêng chúng và chỉ chứa các phương thức render, ở đó còn được gọi là stateless components. Chúng sẽ có thể import data từ các components khác làm thuộc tính (properties)
- Class components: Loại này có nhiệm vụ giữ và quản lý sate của riêng chúng và phương thức render riêng để trả về JSX ở màn hình. Chúng còn được gọi là stateful components vì có thể chúng còn có một state.
Render có chức năng gì trong React?
Trong mỗi Render còn có chức năng riêng như:
- Component nhất định cần có một hàm render (). Hàm này sẽ trả về HTML và sẽ được hiển thị trong component.
- Trường hợp cần nhiều được hiển thị nhiều hơn một element, thì buộc các element này phải nằm trong thẻ cha như <div>, <form>.
State trong React là gì?
State là object React tích hợp để chứa dữ liệu hoặc thông tin về component. Trong một component của State có thể thay đổi theo thời gian. Khi thay đổi, component sẽ render lại.
Làm thế nào để triển khai State trong React?
Để triển khai State trong React những bước bạn có thể thực hiện như sau:
Cách nào để cập nhật State của một Component?
Việc cập nhật State của Component thông qua “setState ()” đã’ được tích hợp sẵn như sau:
Props là gì?
Props là từ viết tắt của Properties – một đối tượng tích hợp React lưu trữ giá trị của các thuộc tính tag và hoạt động tương tự như các thuộc của HTML.
Trong đó, ở phần Pros sẽ cung cấp cách để truyền tải những dữ liệu từ component này sang component khác. Các thức sẽ tương tự như các arguments được truyền trong một hàm.
Làm sao để truyền Props giữa các Component?
Cách truyền Props giữa các Component cách thức như sau:
Sự khác biệt giữa State và Props?
Dưới đây là chi tiết sự khác biệt chi tiết giữa State và Props
| Chi tiết | State | Props |
| User (cách dùng) | Chứa data components | Cho quyền truyền data từ component sang những components khác tương tự như một argument |
| Mutability (khả năng thay đổi) | Thay đổi được | Không thể thay đổi |
| Read-Only (chỉ đọc) | Thay đổi được | chỉ read-only |
| Component con | Không thể truy cập vào | Có thể truy cập |
| Stateless components | Không thể có state | Có thể chứa props |
Thành phần bậc cao là gì?
Thành phần bậc cao hay còn gọi là Higher-order component (HOC) sẽ hoạt động với vai trò như một thùng chứa component giúp chúng đơn giản và được dùng để tái sử dụng. Ngoài ra, chúng thường được sử dụng nhiều hơn khi cần đến việc sử dụng một logic chung.
Làm thế nào để kết hợp nhiều component lại?
Bạn có thể kết hợp nhiều component lại với phương pháp như sau:
Sự khác biệt giữa Class Component và Functional Component?
Sự khác biệt cơ bản được nhắc đến như sau:
| Class Components | Functional Component | |
| State | Có thể giữ hoặc quản lý | không quản lý và giữ được |
| Độ khó | Phức tạp hơn stateless component | Dễ sử dụng, đơn giản |
| Vòng đời | Hoạt động được với tất cả lifecycle methods | Bị hạn chế, không hoạt động được với lifecycle methods |
| Tỷ lệ tái sử dụng | Có thể | Không thể |
Giải thích các phương pháp trong vòng đời của Components.
| Thuật ngữ | Chi tiết |
| getInitialState() | Thực hiện trước khi tạo component |
| componentDidMount() | Điều kiện component render và đã đặt trên DOM |
| shouldComponentUpdate (): | component xác định -> DOM (giá trị True or fault) theo điều kiện |
| componentDidUpdate() | Kích hoạt thời điểm sau khi render. |
| componentWillUnmount( | Sẽ kích hoạt trước component bị hủy hoặc tháo vĩnh viễn. |
Những câu hỏi phỏng vấn về ReactJS Styling
Ngoài các câu hỏi thường gặp thì bạn có thể tham khảo thêm các câu hỏi sẽ được khai thác thêm bao gồm như:
Bạn áp dụng kiểu dáng (style) cho các component trong React như thế nào?
Dưới đây là một vài cách hay có thể áp dụng cho style components trong React như sau:
Mô tả việc sử dụng các mô-đun CSS trong React
- Trong đó, tệp CSS module sẽ được tạo ra bởi .module.css trong tiện ích
- CSS bên trong tệp module chỉ có sẵn cho components đã nhập nó trước đó, vì vậy sẽ không có xung đột nào khi style cho các components đó.
Trên đây là tất tần tật những câu hỏi phỏng vấn reactJS bạn có thể xem và tham khảo từ Việc Làm 24h để trang bị cho mình những kiến thức cũng như kinh nghiệm hữu ích trước khi đi phỏng vấn để có kết quả tốt nhất nhé! Chúc bạn sẽ đạt được kết quả tốt.
