Top 10 câu phỏng vấn hay reactjs năm 2022
React là thư viện tối ưu dành cho các nhà phát triển front-end. Nói một cách đơn giản, bạn sẽ phát triển tốt hơn khi học React và ngày càng nhiều công ty tuyển dụng các React Developer. Chúng ta hãy cùng xem qua hơn 50 câu hỏi phỏng vấn React cùng các nguồn tài nguyên tham khảo, giúp bạn có được sự chuẩn bị tốt nhất cho buổi phỏng vấn. Show
Nội dung
Kỹ năng cần có ở các ReactJS developerDưới đây là các kỹ năng mà các nhà tuyển dụng thường tìm kiếm ở các ReactJS developer:
Dưới đây là các câu hỏi phỏng vấn React các nhà tuyển dụng thường đặt ra để tìm các ứng viên có các kỹ năng trên 1/ Những câu hỏi phỏng vấn React cơ bảnDưới đây là các câu hỏi phỏng vấn dùng để kiểm tra các kiến thức cơ bản về React Q1: ReactJS là gì?React là một thư viện JavaScript front end mã nguồn mở được sử dụng để xây dựng giao diện người dùng, đặc biệt là cho các ứng dụng trang đơn (single page application). Nó được sử dụng để xử lý view layer cho ứng dụng web và thiết bị di động. React được tạo ra bởi Jordan Walke, một kỹ sư phần mềm làm việc cho Facebook. React lần đầu tiên được triển khai trên News Feed của Facebook vào năm 2011 và trên Instagram vào năm 2012.. Q2: Các tính năng chính của React là gì?Các tính năng chính của React:
Q3: Ưu điểm quan trọng nhất của việc sử dụng React là gì?Dưới đây là danh sách những lợi thế quan trọng nhất của việc sử dụng React:
Q4: Những hạn chế lớn nhất của React là gì?
Q5: JSX là gì?JSX là viết tắt của JavaScript XML. Nó là một tiện ích mở rộng React cho phép viết mã JavaScript trông tương tự như HTML. Nó làm cho tập tin HTML dễ hiểu. Tập tin JSX làm cho ứng dụng React trở nên mạnh mẽ và tăng hiệu suất của nó. JSX cung cấp cho bạn khả năng viết cú pháp giống XML trong cùng một tập tin nơi bạn viết mã JavaScript và sau đó preprocessor (tức là bộ chuyển mã như Babel) chuyển đổi các biểu thức này thành mã JavaScript thực. Cũng giống như XML / HTML, các thẻ JSX có tên thẻ, thuộc tính và con. Hãy tìm hiểu cách JSX hoạt động: Nếu không sử dụng JSX, chúng ta sẽ phải tạo một phần tử bằng quy trình sau:
Sử dụng JSX, đoạn code trên có thể được đơn giản hóa:
Như có thể thấy trong đoạn mã trên, chúng ta đang trực tiếp sử dụng HTML bên trong JavaScript. Q7: Tại sao các trình duyệt không thể đọc JSX?Trình duyệt không thể đọc JSX trực tiếp vì chúng chỉ có thể hiểu các đối tượng JavaScript và JSX không phải là một đối tượng JavaScript thông thường. Do đó, chúng ta cần chuyển đổi tập tin JSX thành một đối tượng JavaScript bằng cách sử dụng các bộ chuyển đổi (transpilers) như Babel và sau đó chuyển nó vào trình duyệt. Q8: Ưu và nhược điểm của JSX là gì?Ưu điểm của JSX:
Nhược điểm của JSX:
Nguồn: JSX Full Form Q9: Bạn hiểu thế nào về Virtual DOM?DOM ảo (Virtual DOM) là một lightweight JavaScript object, là một đại diện trong bộ nhớ của DOM thực. Nó là bước trung gian giữa hàm render đang được gọi và việc hiển thị các phần tử trên màn hình. Nó tương tự như một cây nút (node tree) liệt kê các phần tử, thuộc tính và nội dung dưới dạng các đối tượng và thuộc tính của chúng. Hàm render tạo một node tree gồm các thành phần React và sau đó cập nhật node tree này để đáp ứng với các thay đổi đột biến trong mô hình dữ liệu do các hành động khác nhau của người dùng hoặc hệ thống. Toàn bộ quá trình này gọi là reconciliation. Q10: Hãy giải thích sự hoạt động của Virtual DOMVirtual DOM hoạt động theo ba bước đơn giản.
2. Sau đó, sự khác biệt giữa bản đại diện DOM trước đó và bản mới được tính toán: 3. Sau khi tính toán xong, DOM thực sẽ chỉ được cập nhật với những thứ đã thực sự thay đổi. Q11: React khác thế nào với Angular?
Q12: Sự khác biệt giữa ReactJS và React Native là gì?
Xem thêm về sự khác nhau giữa React và React Native Q13: Sự khác biệt giữa DOM thực và DOM ảo là gì?
Q14: Cú pháp của React’s ES6 khác gì so với ES5?Cú pháp đã thay đổi từ ES5 sang ES6 theo các khía cạnh sau:
2. export vs exports
3. component và function:
4. props
5. state
2/ Các câu hỏi về React ComponentCác câu hỏi phỏng vấn về Component là rất quan trọng trong các buổi phỏng vấn về React Q15: Component trong React là gì?Trong React, các component là khối xây dựng của các ứng dụng React. Các component này chia toàn bộ giao diện người dùng của ứng dụng React thành các đoạn mã nhỏ, độc lập và có thể tái sử dụng. React hiển thị từng component này một cách độc lập mà không ảnh hưởng đến phần còn lại của giao diện người dùng ứng dụng. Do đó, chúng ta có thể nói rằng, trong React, mọi thứ đều là một component. Q16: Làm thế nào để tạo các component trong React?Có hai cách có thể để tạo một component: Functional Components: Đây là cách đơn giản nhất để tạo một component. Đó là các hàm JavaScript thuần túy chấp nhận đối tượng props làm tham số đầu tiên và trả về các phần tử React:
Class Components: Bạn cũng có thể sử dụng ES6 class để định nghĩa một component. Hàm component trên có thể được viết là:
Q17: Hãy cho biết sự khác nhau giữa class component và functional component?Trước khi ra đời Hooks trong React, các functional components được gọi là các stateless components (component không trạng thái) và nằm sau các class components trên cơ sở tính năng. Sau khi giới thiệu Hooks, các functional components tương đương với các class components. Mặc dù các functional components đang là xu hướng mới, react team vẫn kiên quyết giữ các class coponent trong React. Do đó, điều quan trọng là phải biết cả hai component này khác nhau như thế nào. Hãy so sánh các class và functional components: 1/ Khai báo: Các functional components là các hàm JavaScript và do đó có thể được khai báo bằng cách sử dụng arrow function hoặc từ khóa function:
Các class coponent được khai báo bằng ES6 class:
2/Xử lý props Hãy render component sau với các props và phân tích xem cách các functional và class component xử lý các props:
Trong các functional components, việc xử lý các props khá đơn giản. Bất kỳ prop nào được cung cấp làm đối số cho một functional component, đều có thể được sử dụng trực tiếp bên trong các phần tử HTML:
Trong class component, các props được xử lý khác:
Như chúng ta thấy trong đoạn code trên, this keyword được dùng trong class components. 3/Xử
lý state
Vì hook useState trả về một mảng gồm hai mục, mục đầu tiên chứa state hiện tại và mục thứ hai là một hàm được sử dụng để cập nhật state. Trong đoạn code trên, bằng cách sử dụng cấu trúc mảng, chúng ta đã đặt tên biến thành studentCount với giá trị hiện tại là “0” và setStudentsCount là hàm được sử dụng để cập nhật state. Để đọc state, chúng ta có thể thấy từ đoạn code trên, tên biến có thể được sử dụng trực tiếp để đọc state hiện tại của biến.
Trong đoạn code trên, chúng ta sử dụng Q18: Mục đích của |