Top 50 câu hỏi và câu trả lời phỏng vấn React cần biết

Các nhà phát triển ReactJS rất được săn đón và có lý do chính đáng cho điều đó. Nhưng bạn sẽ phải chứng minh trình độ thành thạo của mình trong khuôn khổ này để có được công việc.

Sau đây là những câu hỏi thường gặp về phát triển React và câu trả lời mà bạn nên biết. Bao gồm mọi thứ từ cơ bản đến các chủ đề nâng cao hơn.

1. React là gì?

React là một thư viện JavaScript miễn phí và mã nguồn mở để phát triển giao diện người dùng, sử dụng các thành phần để tạo đầu ra cho các ứng dụng một trang. React được phát triển bởi Facebook (Meta) và được duy trì bởi cộng đồng nhà phát triển.

2. Liệt kê các tính năng quan trọng của React

Các tính năng quan trọng nhất của React bao gồm:

1. Dễ sử dụng
2. Phát triển nhanh
3. Việc sử dụng các thành phần
4. Mã hóa
5. DOM ảo
6. Hiệu suất cao
7. Liên kết dữ liệu một chiều

3. Kho lưu trữ dự án của React nằm ở đâu?

React là một kho lưu trữ đơn lẻ tồn tại ở https://github.com/facebook/react. Là một kho lưu trữ đơn có nghĩa là tất cả mã và các nguồn khác được lưu trữ ở cùng một nơi để dễ phát triển và quản lý hơn.

4. Phiên bản ổn định hiện tại của React là gì?

Phiên bản ổn định mới nhất của React tính đến ngày 14 tháng 2022 năm 18.2.0 là XNUMX.

5. Nêu sự khác biệt giữa React Native và ReactJS

React và ReactJS giống nhau, trong khi React Native được xây dựng trên React. Vì sự khác biệt của chúng, React được sử dụng để tạo giao diện người dùng động và phản hồi cho các ứng dụng web, trong khi React Native được thiết kế để xây dựng các ứng dụng dưới dạng ứng dụng di động.

6. Sự khác nhau giữa Element và Component là gì?

Một phần tử React là một đối tượng đơn giản và không thể thay đổi được tạo ra để biểu diễn một nút DOM. Không thể thay đổi có nghĩa là nó không thể thay đổi sau khi được tạo ra, vì nó được hiển thị trên DOM. Mặt khác, một thành phần React có thể thay đổi được và tạo ra đầu ra JSX sau khi được hiển thị.

7. Làm thế nào để tạo một Thành phần?

Có hai cách để tạo một thành phần trong React: 1.) Thành phần hàm và 2.) Thành phần lớp. Như tên gọi, thành phần hàm được tạo bằng cách sử dụng khai báo hàm, trong khi thành phần lớp được tạo bằng cách sử dụng khai báo lớp.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Liệt kê 4 giai đoạn của một thành phần React

Một thành phần React trải qua 4 giai đoạn sau trong vòng đời của nó:

1. Giai đoạn đầu – Xây dựng thành phần ở trạng thái mặc định với các thuộc tính ban đầu
2. Giai đoạn lắp đặt – Kết xuất JSX của thành phần
3. Giai đoạn cập nhật – Thay đổi trạng thái thành phần và vẽ lại ứng dụng
4. Giai đoạn tháo lắp – Xóa thành phần khỏi DOM

9. Giải thích ý nghĩa của Thành phần bậc cao

Thành phần bậc cao (HOC) là một phương pháp React để tạo thành phần. Nó sử dụng một thành phần hiện có để tạo thành phần mới có chức năng bổ sung. Nói cách khác, HOC là một hàm lấy một thành phần làm đối số và trả về một thành phần mới có các tính năng bổ sung.

10. Thành phần được kiểm soát và không được kiểm soát là gì?

Thành phần được kiểm soát là thành phần React lấy giá trị của nó thông qua các props và thông báo cho hệ thống về bất kỳ thay đổi nào thông qua các lệnh gọi lại. Nó được kiểm soát bởi một thành phần cha quản lý nhà nước và truyền các giá trị như props cho thành phần được kiểm soát. Mặt khác, một thành phần không được kiểm soát sẽ quản lý trạng thái của nó và bạn sẽ cần truy vấn DOM sử dụng ref để có được giá trị của nó.

11. Props trong React là gì?

Props trong React chỉ là một cách đơn giản để nói về thuộc tính, và theo đó, bạn đang đề cập đến thuộc tính của một thành phần. Props được sử dụng để truyền dữ liệu từ một thành phần cha đến một hoặc nhiều thành phần con và chúng chỉ đọc được đối với thành phần con.

12. Props.children là gì?

Thuộc tính Props.children chứa thông tin về tất cả nội dung của một thành phần có thẻ mở và thẻ đóng. Các children này tham chiếu đến tất cả các phần tử được định nghĩa bên trong thành phần hiện tại và có thể là một, nhiều hoặc không có.

13. Bạn có thể cập nhật props trong React không?

Không, props trong React là từ trên xuống và không thể thay đổi. Điều này có nghĩa là một thành phần có thể gửi bất kỳ thuộc tính nào mà nó thích đến các thành phần con của nó, nhưng nó không thể cập nhật props của mình. Chỉ có thành phần cha của nó mới có thể cập nhật props của nó.

14. JSX là gì?

JSX là viết tắt của JavaScript XML. Đây là phần mở rộng cú pháp JavaScript cho phép viết HTML bên trong mã React. Dù sao thì trình duyệt cũng không hiểu JSX, vì vậy React phải render thành mã HTML có thể đọc được.

15. Sự khác biệt giữa một thành phần và một phần tử là gì

Một phần tử là một định nghĩa không trạng thái và không thể thay đổi của một nút DOM ảo. Nó chứa cả một kiểu và thuộc tính, nhưng không có phương thức nào như một thành phần. Việc thiếu phương thức này làm cho nó nhanh hơn.

16. Trạng thái trong React là gì?

Trạng thái trong React đề cập đến một đối tượng tích hợp trong một thành phần được sử dụng để lưu trữ và quản lý thông tin về thành phần đó. Trạng thái có thể thay đổi theo thời gian và do đó sẽ kích hoạt việc kết xuất lại thành phần đó. Bạn phải định nghĩa trạng thái trong phương thức xây dựng của thành phần, nếu không thành phần sẽ trở thành không có trạng thái.

17. Thành phần không trạng thái là gì?

Một thành phần React không có trạng thái không có trạng thái. Điều này có nghĩa là bạn không thể thiết lập trạng thái của nó bằng this.setState() phương pháp cũng như không hiển thị nó. Tuy nhiên, một thành phần không trạng thái có thể có các thuộc tính.

18. Làm thế nào để bạn cập nhật trạng thái trong React

Bạn cập nhật trạng thái của một thành phần bằng cách gọi nó this.setState() phương pháp.

19. Giải thích chế độ Strict của React

Chế độ nghiêm ngặt của React là một công cụ giúp nhà phát triển phát hiện các vấn đề tiềm ẩn trong ứng dụng bằng cách kích hoạt các kiểm tra cấp độ sâu hơn trên các thành phần và làm nổi bật nhiều cảnh báo hơn. Chế độ nghiêm ngặt chỉ khả dụng ở chế độ phát triển.

20. Nâng State lên trong React có nghĩa là gì?

Điều này có nghĩa là cho phép các thành phần con chia sẻ trạng thái chung với thành phần cha của chúng, vì điều này giúp quản lý mọi thứ dễ dàng hơn so với việc mỗi thành phần con quản lý trạng thái chung riêng lẻ.

21. Bạn truyền dữ liệu trong React như thế nào?

Bạn truyền dữ liệu trong React bằng props và callbacks. Props của React là một chiều, cho phép các thuộc tính chỉ truyền từ thành phần cha sang thành phần con. Để truyền dữ liệu từ thành phần con sang thành phần cha, bạn phải sử dụng hàm callback.

22. Xác định Phun ra trong Phản ứng

Flux là một khái niệm đơn hướng để chỉ đạo luồng dữ liệu trong một ứng dụng. Đơn hướng có nghĩa là dữ liệu chỉ có thể truyền từ thành phần cha sang thành phần con. Flux cũng có thể bao gồm nhiều kho dữ liệu cho mỗi ứng dụng.

23. Xác định Redux trong Phản ứng

Redux là một thư viện JavaScript mã nguồn mở hữu ích để quản lý các trạng thái phức tạp trong một ứng dụng. Nó độc lập và có thể được sử dụng trong các khuôn khổ khác như Angular. Không giống như Flux, Redux tập trung quản lý trạng thái của ứng dụng, do đó giúp xây dựng các UI phức tạp dễ dàng hơn.

24. Khi nào bạn nên sử dụng Redux?

Không phải tất cả các ứng dụng đều cần Redux. Nhưng nó hữu ích trong các điều kiện sau:

1. Khi bạn có số lượng lớn trạng thái ứng dụng trong ứng dụng của mình
2. Khi logic của ứng dụng của bạn phức tạp
3. Khi ứng dụng của bạn có cơ sở mã lớn
4. Khi bạn phải cập nhật ứng dụng thường xuyên
5. Khi bạn có nhiều người làm việc trên ứng dụng

25. Sự khác biệt chính giữa Redux và Flux là gì?

Sự khác biệt chính giữa hai loại này là Redux quản lý toàn bộ dữ liệu ứng dụng từ một kho lưu trữ duy nhất, trong khi bạn có thể có nhiều kho lưu trữ trong Flux.

26. Liệt kê các thành phần của Redux

Redux có 4 phần chính:

1. Cửa Hàng – Đây là nơi bạn lưu trữ trạng thái của ứng dụng.
2. Hoạt động – Đây là những sự kiện khiến ứng dụng gửi dữ liệu đến kho lưu trữ Redux.
3. giảm – Đây là hàm chấp nhận trạng thái ứng dụng hiện tại và một hành động làm đối số, sau đó trả về trạng thái mới làm kết quả.
4. middleware – Tính năng này cho phép nhà phát triển nắm bắt tất cả các hành động từ một thành phần trước khi chúng đến hàm giảm tốc.

27. React Hooks là gì?

React hooks là một tính năng của các thành phần hàm cho phép bạn truy cập vào các tính năng React khác nhau, chẳng hạn như dữ liệu trạng thái và cập nhật kết xuất. Tính năng này được giới thiệu trong React 16.8.

28. Liệt kê các loại Hook trong React

Có hơn 15 hook trong React, bắt đầu từ các hook cơ bản như useState, useEffect và useContext cho đến các hook bổ sung như useCallback, useReducer, useMemo, useRef, v.v.

29. Mảnh vỡ là gì?

Một đoạn React là một cách thuận tiện để nhóm nhiều phần tử con trong một thành phần, mà không cần thêm chúng vào DOM. Bạn chỉ cần định nghĩa thẻ bằng cách sử dụng:

<>

or

và tải tất cả các phần tử con bạn muốn vào bên trong. Sự khác biệt duy nhất là phiên bản viết tắt <> không chấp nhận khóa và thuộc tính, trong khi phiên bản dài thì có.

30. Liệt kê các phương thức chính của gói react-dom

Chúng là createPortal() để render children vào một DOM bên ngoài và flushSync() để flush các bản cập nhật. Ngoài ra còn có các phương thức render() và hydrate(), đã được thay thế bằng createRoot() và hydrateRoot() kể từ React 18.

31. React Key là gì?

Khóa là mã định danh duy nhất được sử dụng tốt nhất để quản lý danh sách. Khóa giúp dễ dàng xác định từng mục trong danh sách và biết khi nào từng mục đã được cập nhật, xóa hoặc thay đổi theo bất kỳ cách nào.

32. Tại sao React Key lại quan trọng?

Khóa rất quan trọng trong React vì nó giúp render hiệu quả DOM thực. React tốt vì nó cố gắng giảm thiểu các thành phần được render lại sau một sự kiện và sử dụng khóa trên danh sách giúp React không phải render lại toàn bộ danh sách, điều này có thể là vấn đề với các danh sách lớn.

33. Sự kiện trong React là gì?

Sự kiện là bất kỳ hành động nào trong ứng dụng đến từ người dùng hoặc hệ thống. Sự kiện có thể bao gồm từ nhấp chuột hoặc chạm vào thiết bị di động đến thay đổi kích thước cửa sổ, nhấn phím, kéo, lấy nét, v.v.

34. Giải thích điều gì Sự kiện tổng hợp Có nghĩa

Sự kiện tổng hợp là một wrapper xung quanh các sự kiện gốc của trình duyệt, với vấn đề là các trình duyệt khác nhau đặt tên cho các sự kiện của chúng khác nhau. React sử dụng sự kiện tổng hợp để tránh vấn đề phải tạo nhiều triển khai và phương thức cho tất cả các trình duyệt khác nhau. Theo cách này, React duy trì tên chung cho tất cả các sự kiện trình duyệt khác nhau dưới dạng một API thống nhất.

35. Webpack là gì?

Webpack là một hệ thống đóng gói mô-đun được sử dụng để kết hợp và thu nhỏ các tệp JavaScript và CSS. Nó được xây dựng trên Node.js và hữu ích khi làm việc với số lượng lớn các tệp hoặc tài sản không phải mã như hình ảnh và phông chữ.

36. Create-react-app là gì?

Create-react-app là một công cụ giúp bạn tạo ứng dụng React một trang trong môi trường Node.js của bạn. Nó tạo ra tất cả các tệp và thư mục mà bạn cần để bắt đầu một ứng dụng cơ bản và bạn thực hiện từ đó. Nó yêu cầu Node phiên bản 14.0.0 trở lên và npm từ ver. 5.6.

Cách sử dụng rất đơn giản:

npx create-react-app myNewApp

cd myNewApp

npm bắt đầu

37. Bạn có thể render phía máy chủ bằng React không?

Có, bạn có thể, mặc dù nó có thể tốn nhiều tài nguyên cho các dự án lớn. Kết xuất phía máy chủ hữu ích vì nó cải thiện trải nghiệm người dùng và SEO. Bạn sẽ cần một môi trường Node.js, một bundler như Webpack và một khuôn khổ như Tiếp theo.js và Remix để hiển thị các ứng dụng React khi chạy. Một giải pháp cho việc sử dụng tài nguyên chuyên sâu là sử dụng trình tạo trang web tĩnh, chẳng hạn như Next.js dựa trên Gatsby.

38. Giải thích chức năng của hàm mũi tên

Hàm mũi tên chỉ đơn giản là cách ngắn gọn hơn để định nghĩa hàm. Đây là cách viết tắt ES6 thay thế:

= hàm() với ()=>.

Ví dụ:

kiểm tra = hàm(){

trả về “Đây là một bài kiểm tra”;

}

sau đó trở thành:

kiểm tra = () => {

trả về “Đây là một bài kiểm tra”;

}

hoặc đối với các câu lệnh một dòng:

test = () => “Đây là một bài kiểm tra”;

39. a là gì Bộ định tuyến phản ứng?

React router là một thư viện cung cấp chức năng định tuyến trong ứng dụng React. Nó giúp dễ dàng đưa vào và sử dụng các thành phần điều hướng phong phú, có thể rất hữu ích cho các dự án lớn hoặc phức tạp.

40. Những lợi thế chính của việc sử dụng React Router là gì?

Nó tạo ra các đường dẫn url khác nhau cho ứng dụng của bạn và cung cấp các giá trị window.location và một đối tượng lịch sử.

41. ComponentWillUnmount() là gì?

Đây là một phương thức thành phần được gọi bất cứ khi nào React sắp hủy thành phần. Đây là một nơi tốt để dọn dẹp mọi thứ, xóa bộ đếm thời gian, hủy yêu cầu mạng và xử lý các vấn đề hủy khởi tạo quan trọng khác.

42. Constructor() là gì?

Constructor là phương thức của thành phần được gọi trong quá trình khởi tạo thành phần. Nó thường được sử dụng để khởi tạo trạng thái cục bộ và để ràng buộc các phương thức xử lý sự kiện.

43. Virtual DOM là gì?

DOM ảo của React là bản sao nhẹ của DOM của tài liệu HTML thực tế. Nó được sử dụng để quản lý và cập nhật hiệu quả các thay đổi trên DOM thực.

44. Ưu điểm của DOM ảo so với DOM thực là gì?

DOM ảo nhẹ và nhanh hơn DOM thực khi render, điều này giúp render sang DOM ảo trước và chỉ thực hiện thay đổi với DOM thực khi cần thiết. Mỗi nút trên DOM thực đều có một thành phần tương ứng trên DOM ảo, và khi có thay đổi với một thành phần ảo sau khi render, React sẽ biết chính xác nút HTML thực nào cần cập nhật hoặc xóa.

45. Giải thích thuật ngữ Hòa giải trong Phản ứng

Đối chiếu là phương pháp của React để cập nhật DOM thực chỉ khi cần thiết, bằng cách kiểm tra các phiên bản cập nhật của DOM ảo thông qua việc so sánh và chỉ cập nhật các nút chính xác đã thay đổi trên DOM thực.

46. Giải thích thuật ngữ Profiler trong Phản ứng

Profiler là một công cụ React giúp tối ưu hóa ứng dụng bằng cách đo số lần ứng dụng hiển thị và thời gian cần thiết để hiển thị từng thành phần. Điều này giúp nhà phát triển xác định các phần của ứng dụng có thể cần tối ưu hóa.

47. Giải thích thuật ngữ Bối cảnh trong Phản ứng

Context là phương pháp truyền dữ liệu giữa các thành phần React ở nhiều cấp độ mà không cần phải truyền dữ liệu qua từng cấp độ lồng nhau bằng props. Phương pháp này được sử dụng tốt nhất để chia sẻ dữ liệu dễ dàng với nhiều thành phần không cần cập nhật liên tục, chẳng hạn như thông tin chủ đề và dữ liệu người dùng. Nhược điểm của phương pháp này là có thể khiến việc tái sử dụng thành phần trở nên khó khăn.

48. Giải thích thuật ngữ Gắn kết trong Phản ứng

Mounting trong React là quá trình gắn một thành phần dưới dạng một nút vào DOM. Unmounting thì ngược lại.

49. Giải thích thuật ngữ Rendering trong Phản ứng

Rendering là quá trình vẽ một thành phần. Quá trình này thường xảy ra khi trạng thái của thành phần thay đổi và React phải vẽ lại UI. Nếu một thành phần được vẽ lại trong quá trình render, thì các thành phần con của nó cũng được vẽ lại.

50. Giải thích thuật ngữ Ranh giới lỗi trong Phản ứng

Error boundaries đề cập đến một thành phần React bắt lỗi JavaScript từ các thành phần con của nó, ghi lại lỗi và hiển thị UI dự phòng thay cho các nút bị sập. Error boundaries đã được giới thiệu trong React 16.

Kết luận

Chúng ta đã đi đến phần cuối của danh sách 50 câu hỏi phỏng vấn React cần biết và hy vọng đến giờ bạn đã có ý tưởng tốt về những gì mình có thể mong đợi.

Bạn cũng nên lưu ý rằng không có gì là cố định và cuộc phỏng vấn của bạn có thể diễn ra theo bất kỳ hướng nào. Do đó, bạn nên tiếp tục học và cập nhật thông tin.