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

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à 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 (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â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.

• 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.

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à 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à 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) 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.

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 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à 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.

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).

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.

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.

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.

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()

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ó 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.

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.

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.

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à 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.

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 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 đủ. 

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ả.

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à 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.

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

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ó.

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 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ó, 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.

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 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ó, 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ó 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.

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.

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ề.

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.