ReactJS là một phần quan trọng và không thể thiếu trong lập trình web front-end sử dụng JavaScript (JS) hiện nay. Với các Dev front-end nào muốn làm việc với JS đều nên trang bị đầy đủ cho mình kiến thức về ReactJS. Chính vì sự phổ biến cũng như quan trọng của ReactJS mà hiện nay rất nhiều công ty về công nghệ hay phát triển web / phần mềm đều có nhu cầu tìm kiếm những lập trình viên ReactJS về với team của mình. Để gây ấn tượng với nhà tuyển dụng, việc học hỏi và chuẩn bị kỹ lưỡng những kiến thức về ReactJS là việc mà các Dev nên làm trước mỗi buổi phỏng vấn. Trong bài viết này, mình sẽ cung cấp cho các bạn những câu hỏi cơ bản trong các buổi phỏng vấn và những kiến thức về ReactJS mà bạn cần lưu ý nhé.
Câu hỏi 1: ReactJS là gì? Đâu là những đặc điểm nổi bật của ReactJS?
Theo mình, đối với những câu hỏi như thế này, các nhà tuyển dụng sẽ không muốn nghe bạn đọc “vẹt” lại những gì mình đã chuẩn bị đâu, mà họ muốn bạn trả lời theo cách hiểu của mình hơn. Hãy giải thích một cách thật ngắn gọn và dễ hiểu nhất có thể nhé.
Đối với câu hỏi ReactJS là gì, bạn chỉ cần cung cấp câu trả lời ngắn gọn như: ReactJS là một thư viện front-end và dựa trên JavaScript. ReactJS giúp cải thiện performance của web hay ứng dụng, đồng thời cho phép chúng ta làm việc trên cả client-side và server-side. Mục đích chính của thư viện này là cung cấp cho các nhà phát triển một UI (User Interface – giao diện người dùng) có thể tái sử dụng toàn diện.
Về đặc điểm nổi bật của ReactJS, bạn có thể kể đến những đặc điểm như:
- Thích hợp để phát triển các UI phức tạp trên web cũng như mobile.
- Sử dụng virtual DOM thay vì real DOM.
- Dễ dàng tích hợp được với các khung JavaScript khác.
- Có thể mở rộng và nhanh chóng.
Câu hỏi 2: ReactJS làm việc như thế nào? Cách làm việc của virtual-DOM trong React?
ReactJS sử dụng và tạo ra virtual DOM. Khi trạng thái thay đổi trong một thành phần, ReactJS sẽ sử dụng thuật toán Diffing để nhận biết được đã có điều gì khác hoặc thay đổi trong virtual DOM. Bước tiếp theo là Reconciliation. Ở bước này, virtual DOM sẽ được cập nhật lại với kết quả khác sau khi sử dụng thuật toán Diffing ở bước đầu tiên.
HTML DOM luôn có cấu trúc hình dạng cây (tree-structured) – một cấu trúc của HTML. Virtual DOM sẽ là một bản tóm tắt của HTML DOM. Nó nhẹ hơn và được tách rời khỏi các chi tiết triển khai dành riêng cho trình duyệt. ReactElements là một phần của virtual DOM và chúng tạo nên các nút cơ bản tại đây. Sau khi chúng ta xác định được các elements rồi thì ReactElements sẽ có thể tạo nên “real” DOM.
Bất cứ khi nào ReactComponent thay đổi trạng thái, thuật toán Diff trong React sẽ chạy và xác định những gì đã thay đổi. Và sau đó nó cập nhật DOM với kết quả khác. Điểm mấu chốt ở đây đó là nó được thực hiện nhanh hơn và rẻ hơn rất nhiều so với DOM thông thường. Việc so sánh giữa virtual DOM và DOM thông thường cũng sẽ giúp bạn ghi điểm đối với nhà tuyển dụng nữa đó.
Câu hỏi 3: JSX là gì?
JSX là chữ viết tắt của JavaScript XML. Đây là một cú pháp mở rộng của JavaScript. Chúng ta có thể sử dụng JSX để hiển thị UI components. JSX cũng sản xuất những “phần tử” React. Chúng ta có thể nhúng bất cứ biểu thức JavaScript nào bằng cách gói gọn chúng trong dấu ngoặc nhọn. Sau khi chỉnh sửa và biên soạn, những biểu thức JSX có thể trở thành các đối tượng JavaScript thông thường. Điều này có nghĩa là ta có thể sử dụng JSX trong các câu lệnh If và các vòng lặp, coi JSX như đối số, gán nó cho các biến và trả lại nó từ các hàm. ReactJS sử dụng tệp này để làm cho mã HTML dễ đọc và viết hơn. Ngoài ra, JSX có thể làm tăng hiệu suất của ứng dụng hoặc trang web.
Dưới đây là ví dụ của JSX:
Sử dụng React.createElement:
Câu hỏi 4: Components là gì?
Đây cũng là một câu hỏi cơ bản thường xuyên được các nhà tuyển dụng cũng hỏi. Nhìn chung, Trong React, các component hoạt động giống như các hàm trả về các thành phần HTML. Các component là các thành phần độc lập và có thể sử dụng lại. Chúng cũng thực hiện công việc giống như các functions trong JavaScript nhưng chúng độc lập và nhiệm vụ chính là trả về HTML thông qua hàm render. Có 2 loại component là Function Component và Class Component.
Ví dụ về Function Component:
Ví dụ về Class Component:
Câu hỏi 5: React.createClass là gì?
React.createClass cho phép chúng ta tạo nên các class components. Cùng với ES6, ReactJS cũng cho phép chúng ta tạo nên class components sử dụng ES6 JavaScript classes.
Khi sử dụng React.createClass, chúng ta có thể tạo nên class component như sau:
Còn khi sử dụng ES6 class:
Câu hỏi 6: Props là gì?
Với những câu hỏi định nghĩa thì bạn vẫn nên trả lời một cách ngắn gọn và dễ hiểu nhất có thể. Props là từ viết tắt của Properties và là một attributes có thể thêm vào khi sử dụng components. Những attributes này được gọi ra trong components bằng this.props và có thể được sử dụng trong method render để render dữ liệu động. Props cũng có thể được sử dụng để chuyển dữ liệu sang các component khác. Những dữ liệu này được di chuyển theo một hướng duy nhất (unidirectional flow), có nghĩa là theo hướng từ phần tử cha mẹ cho đến phần tử con.
Nhìn chung, sẽ có 3 bước để sử dụng Props trong ReactJS. Đây sẽ là một điểm lợi cho bạn nếu giải thích được Props hoạt động như thế nào.
- Bước 1: Xác định attribute và data.
- Bước 2: Di chuyển data đó đến phần tử con (child component).
Bước 3: Di chuyển Props data.
Câu hỏi 8: State là gì?
Khái niệm về State cũng là một trong những khái niệm cơ bản mà ai làm về ReactJS cũng nên biết. State là một object có thể được sử dụng để chứa dữ liệu hoặc thông tin về components. State có thể được thay đổi bất cứ khi nào mong muốn. Khác với props, ta có thể truyền props sang các components khác nhau thì state chỉ tồn tại trong phạm vi của components chứa nó, mỗi khi state thay đổi thì components đó sẽ được render lại.
Ví dụ về State:
Câu hỏi 9: State và Props có điểm gì khác nhau?
Về cơ bản, Props và State làm những việc giống nhau nhưng lại được sử dụng theo những cách khác nhau. Props thường sẽ được sử dụng để di chuyển data từ phần tử cha đến phần tử con. Props sẽ được sử dụng cho data bất biến và không thể thay đổi được. Trong khi đó thì State được sử dụng với những data có thể thay đổi được. Đây là điểm khác nhau lớn nhất giữa Props và State. Bất cứ khi nào dữ liệu thay đổi trong một component, State có thể sử dụng.
Câu 10: Sự khác biệt giữa ReactJS và React Native là gì?
Trong các cuộc phỏng vấn, chắc chắn bạn sẽ được yêu cầu là so sánh ReactJS với những framework khác. Câu hỏi so sánh với React Native là một câu hỏi phổ biến.
ReactJS, nói một cách đơn giản, chỉ là một thư viện của JavaScript. Các Dev khi cần phải lựa chọn các module tốt nhất và cần thiết nhất trước khi bắt đầu một dự án. React Native là nền tảng đầy đủ, nhiều tính năng và có thể là nơi để chúng ta xây dựng ứng dụng từ đầu đến cuối. Ta có thể viết ngay một ứng dụng bằng React Native chỉ với một dòng command. React Native thường được sử dụng để phát triển ứng dụng trên điện thoại, còn ReactJS thiên về phần front-end cho website.
Trên đây là những câu hỏi phỏng vấn cơ bản thường gặp đối với vị trí về ReactJS. Mình cũng đã cung cấp cho các bạn những kiến thức cần thiết cũng như cơ bản nhất để có thể trả lời những câu hỏi đó. Nếu muốn gây ấn tượng với nhà tuyển dụng, việc trang bị những kiến thức cơ bản là điều cần thiết, đồng thời nghiên cứu thêm những kiến thức nâng cao và sâu hơn nữa về ReactJS. Mình mong qua bài viết này, các bạn Dev sẽ có cái nhìn tổng quan hơn về ReactJS.