Mục lục bài viết
Ngày nay, React.js đang dần trở thành framework phát triển web thiết yếu trong cộng đồng JavaScript. Do đó, những bạn mới bắt đầu phát triển web hoặc đang cố gắng tìm hiểu tất cả những thông tin liên quan đến JavaScript thì nhất định không nên bỏ qua bài viết này.
Chúng tôi sẽ gửi đến bạn định nghĩa ReactJS là gì, cách thức hoạt động của nó, điều gì làm cho nó trở nên khác biệt so với các framework JavaScript khác. Và phần đặc biệt nhất chính là bộ câu hỏi phỏng vấn ReactJS từ cơ bản đến nâng cao dành cho các Web Developer. Cùng tìm hiểu nhé!
» Tham khảo kinh nghiệm: Phỏng vấn IT Support
Hãy để chúng tôi giúp bạn hiểu ReactJS là gì thông qua ví dụ thực tế sau.
Giả sử một trong những người bạn của bạn vừa đăng một bức ảnh lên Facebook. Bây giờ bạn tới trang cá nhân và thả một reaction bất kỳ vào bức ảnh đó, sau đó hãy ấn vào mục comment để đọc bình luận. Bạn có để ý rằng trong lúc đang đọc bình luận, ngay cả khi không tải lại trang thì số lượng reaction vẫn tăng lên đều đặn không? Sự thay đổi số lượng kỳ diệu này là do ReactJS.
ReactJS là một thư viện JavaScript dựa trên thành phần mã nguồn mở do Jordan Walke - một trong những kỹ sư phần mềm của Facebook phát triển để giải quyết một số vấn đề mà họ gặp phải trước đó. Nó được sử dụng để xây dựng các giao diện người dùng và ứng dụng web tương tác một cách nhanh chóng và hiệu quả với ít mã hơn đáng kể so với JavaScript gốc.
Trong React, các nhà phát triển sẽ xây dựng ứng dụng của mình bằng cách tạo ra các thành phần có thể tái sử dụng mà bạn có thể coi như các khối Lego độc lập. Mỗi thành phần sẽ chịu trách nhiệm hiển thị một đoạn HTML nhỏ. Các thành phần có thể được lồng trong các thành phần khác để khi lắp ráp lại sẽ tạo thành toàn bộ giao diện người dùng của ứng dụng.
Nhờ khả năng tạo các ứng dụng web nhanh và hiệu quả, React.js đã được sử dụng để cấu tạo nên hàng nghìn ứng dụng web, bao gồm cả ứng dụng lâu đời lẫn ứng dụng mới thành lập. Chẳng hạn như: Facebook, Instagram, Netflix, Reddit, Uber, Airbnb, New York Times, SoundCloud, Discord, WhatsApp,..
React ngày càng phát triển mạnh mẽ hơn và hiện nó có thể sử dụng để xây dựng các ứng dụng di động gốc Native App bằng React Native và xây dựng Desktop App bằng Electron.js.
» Tham khảo: Việc làm IT lương cao
Vai trò chính của React trong một ứng dụng là xử lý lớp khung nhìn, tức là chữ V trong mẫu model-view-controller (MVC) của ứng dụng đó, bằng cách cung cấp khả năng thực thi kết xuất tốt nhất và hiệu quả nhất.
Thay vì một mình xử lý toàn bộ giao diện người dùng, React.js khuyến khích các nhà phát triển tách giao diện người dùng phức tạp này thành nhiều thành phần riêng lẻ có thể tái sử dụng. Khi làm như vậy, React.js có thể kết hợp tốc độ và hiệu quả của JavaScript với một phương pháp thao tác DOM hiệu quả hơn, được gọi là DOM ảo giúp các trang web hiển thị nhanh hơn mà không cần tải lại nhiều lần, đồng thời tạo ra các ứng dụng web có tốc độ phản hồi cao.
Thông thường, khi bạn truy cập một trang web bằng cách nhập URL của nó vào trình duyệt web của mình (chẳng hạn như Google Chrome) thì trình duyệt của bạn sẽ gửi yêu cầu cho trang web đó rồi mới hiển thị kết quả. Nếu bạn nhấp vào một liên kết bất kỳ trên trang web đó để đến một trang khác thì một yêu cầu mới sẽ lại được gửi đến máy chủ để tải trang mới đó.
Quá trình tải qua lại giữa trình duyệt của bạn (máy khách) và máy chủ sẽ tiếp tục diễn ra cho mọi trang mà bạn cố gắng truy cập trên một trang web. Cách tiếp cận tải trang web điển hình này mặc dù hoạt động tốt, nhưng hãy xem xét trên một trang web có rất nhiều dữ liệu. Chắc chắn nó sẽ tạo ra trải nghiệm kém ở phía người dùng.
Ngoài ra, khi dữ liệu thay đổi trong ứng dụng JavaScript truyền thống, nó yêu cầu thao tác DOM thủ công để phản ánh những thay đổi này. Bạn phải xác định được dữ liệu nào đã thay đổi và cập nhật DOM để phản ánh những thay đổi đó, dẫn đến việc tải lại toàn bộ trang.
React thực hiện một cách tiếp cận khác bằng cách cho phép bạn xây dựng cái được gọi là ứng dụng một trang - single page application (SPA). Ứng dụng một trang chỉ tải một tài liệu HTML duy nhất trong yêu cầu đầu tiên. Sau đó, nó cập nhật phần, nội dung hoặc nội dung cụ thể của trang web cần cập nhật bằng JavaScript.
Mẫu này được gọi là định tuyến phía máy khách vì máy khách không phải tải lại toàn bộ trang web để nhận trang mới mỗi khi người dùng đưa ra yêu cầu mới. Thay vào đó, React chặn yêu cầu và chỉ tìm nạp cũng như thay đổi các phần cần thay đổi mà không phải kích hoạt tải lại toàn bộ trang. Cách tiếp cận này mang lại hiệu suất tốt hơn và trải nghiệm người dùng năng động hơn.
React dựa trên DOM ảo (Virtual DOM), là bản sao của DOM thực (Real DOM). DOM ảo của React ngay lập tức được tải lại để phản ánh thay đổi mới này bất cứ khi nào có thay đổi về trạng thái dữ liệu. Sau đó, React so sánh DOM ảo với DOM thực để tìm ra chính xác điều gì đã thay đổi.
Sau đó, React sẽ tìm ra cách ít tốn kém nhất để vá DOM thực bằng bản cập nhật đó mà không hiển thị DOM thực. Do đó, các thành phần và giao diện người dùng của React phản ánh rất nhanh các thay đổi vì bạn không phải tải lại toàn bộ trang mỗi khi có nội dung cập nhật.
- ReactJS có những tính năng nổi bật nào?
- Props trong React được sử dụng để làm gì?
- Làm thế nào để comment trong ReactJS?
- Hãy phân biệt Real DOM với Virtual DOM trong ReactJS
- Cú pháp của React trong ES6 khác thế nào so với ES5?
- Làm sao để tạo event trong React.js?
- Hàm render() trong React có tác dụng gì?
- Nêu điểm khác biệt giữa React.js với một framework JavaScript cơ bản khác là Angular
- State được lưu ở đâu trong ứng dụng React + Redux?
- Hàm setState trong React.js là hàm đồng bộ hay bất đồng bộ? Tại sao?
- Điểm khác nhau lớn nhất giữa State và Props là gì?
- Life Cycle của component trong React hoạt động thế nào?
- Functional component và Class component khác nhau ở đâu?
- Bạn nên gọi AJAX ở đoạn nào trong một React component?
- Presentational và Container component khác nhau ở đâu?
- Hãy nêu sự khác nhau giữa Element và Component trong React.js?
- Làm thế nào để có thể ngăn chặn hành vi mặc định khi callback một sự kiện (event) trong React?
- Làm thế nào để chuyển một property từ component cha sang component con?
- Làm thế nào ngăn một component hiển thị trong React.js?
- Tại sao lại phải viết hoa các component?
- Các nhà phát triển sử dụng super(props) trong constructor nhằm mục đích gì?
- Khi nào nên sử dụng Class component thay vì Functional component?
- Tham số thứ 2 hay hàm Callback trong setState được sử dụng làm gì?
- Làm thế nào để truyền thêm 1 parameter vào 1 event handler?
- Error Boundary được xử lý như thế nào trong ReactJS?
- Làm thế nào để tránh liên kết với biến "this" trong việc viết Event callback?
- Sử dụng Key trong React có lợi ích gì?
- Typical pattern nào trong ReactJS được sử dụng để render một mảng lớn dữ liệu?
- Hãy liệt kê một số thư viện Flux phổ biến
- "shouldComponentUpdate" được sử dụng để làm gì?
- Làm thế nào để ReactJS build gói ở bản Production?
- Những điều mà bạn không nên làm trong phương thức render () của Component là gì?
- Smart component và Dumb component khác nhau như thế nào?
- Middleware nào thường được sử dụng để xử lý các lời gọi bất đồng bộ trong Redux?
- Bạn thường làm thế nào để truy cập vào nút DOM trong một React Component?
- forceUpdate có tác dụng gì trong một React Component?
- Các nhà phát triển liên kết các Event handler với "this" để làm gì?
- Tại sao React sử dụng SyntheticEvent?
- Làm thế nào để sử dụng Props validation trong ReactJS?
- Bạn thường làm thế nào để tạo Props Proxy cho Higher Order Component (HOC) component?
- Trong 2 phương thức: refs và findDOMNode(). Phương thức nào thường được ưu tiên hơn khi callback?
- Kể ra vài điểm khác biệt khi sử dụng getInitialState và constructor trong React
- Hãy lấy ví dụ về 1 key tồi gây ra lỗi
- Làm thế nào để ngăn việc các component re-render?
Trên đây là một vài thông tin hữu ích mà chúng tôi muốn gửi đến các bạn Developer về ReactJS và đặc biệt là list câu hỏi phỏng vấn ReactJS từ level cơ bản đến nâng cao có thể gặp trong buổi phỏng vấn. Mong rằng những câu hỏi phỏng vấn này có thể giúp bạn vượt qua vòng phỏng vấn một cách thuận lợi.