40 câu hỏi phỏng vấn React JS hàng đầu và câu trả lời (2026)

Bởi: James Hartman James Hartman
Hours cập nhật

Bạn đang chuẩn bị cho buổi phỏng vấn React JS? Đã đến lúc khám phá những điều đang chờ đón bạn. Hiểu rõ Câu hỏi phỏng vấn React JS giúp bộc lộ cả sự rõ ràng về mặt khái niệm lẫn thế mạnh triển khai thực tế của bạn.

React JS mang đến cơ hội nghề nghiệp vô cùng lớn cho các chuyên gia có kinh nghiệm kỹ thuật và chuyên môn sâu rộng. Dù bạn là sinh viên mới ra trường hay đã có 5 năm hay 10 năm kinh nghiệm chuyên môn, việc phân tích kỹ năng và chuyên môn kỹ thuật đều rất quan trọng. Những câu hỏi và câu trả lời này sẽ giúp các trưởng nhóm, quản lý và nhà phát triển trau dồi kỹ năng và vượt qua những buổi phỏng vấn hàng đầu.

Dựa trên thông tin chi tiết từ hơn 85 chuyên gia, bao gồm các nhà quản lý tuyển dụng và lãnh đạo kỹ thuật, tài liệu tổng hợp này phản ánh những kỳ vọng đa dạng của ngành và các mô hình phỏng vấn thực tế được thu thập từ các nhóm làm việc trên nhiều lĩnh vực khác nhau.

Câu hỏi và câu trả lời phỏng vấn React JS

Những câu hỏi và câu trả lời phỏng vấn React JS hàng đầu

1) Giải thích DOM ảo và cách thức hoạt động của quá trình đối chiếu trong React.

Câu trả lời:

DOM ảo là một biểu diễn trong bộ nhớ của giao diện người dùng (UI) mà React duy trì để tính toán hiệu quả các thay đổi của UI. Khi trạng thái hoặc thuộc tính thay đổi, React sẽ render một cây DOM ảo mới, sau đó chạy một khác biệt thuật toán so với cây trước đó để khám phá tập hợp tối thiểu các hoạt động DOM thực tế cần thiết. Quá trình này, được gọi là hòa giải, giảm thiểu việc xáo trộn bố cục và việc chỉnh sửa lại trình duyệt tốn kém. React chỉ định phím với các phần tử trong danh sách để giúp nó khớp các nút trên các bản render, và nó sử dụng các phương pháp tìm kiếm (như so sánh kiểu và khóa) để quyết định cập nhật, sắp xếp lại hoặc xóa các nút. Các lợi ích bao gồm cập nhật có thể dự đoán được, diện tích bề mặt nhỏ hơn cho lỗi và hiệu suất tốt hơn trong các giao diện người dùng phức tạp.

Ví dụ:

Hiển thị danh sách tin nhắn trò chuyện động: bằng cách sử dụng ổn định key giá trị (ID tin nhắn), chỉ những tin nhắn mới được thêm vào DOM trong khi các nút hiện có vẫn giữ nguyên, tránh việc hiển thị lại không cần thiết.

👉 Tải xuống PDF miễn phí: Câu hỏi và câu trả lời phỏng vấn React JS

2) Có những loại vòng đời thành phần nào trong React và Hooks ánh xạ tới chúng như thế nào?

Câu trả lời:

Các thành phần React trải qua các giai đoạn gắn kết, cập nhật và hủy gắn kết. Trong các thành phần lớp, các phương thức vòng đời như componentDidMount, shouldComponentUpdate, componentDidUpdatevà componentWillUnmount quản lý các tác dụng phụ, quyết định kết xuất và dọn dẹp. Trong các thành phần chức năng, Hooks cung cấp khả năng tương đương: useEffect xử lý các hiệu ứng sau khi render; các chức năng dọn dẹp bên trong useEffect chạy khi ngắt kết nối hoặc trước hiệu ứng tiếp theo; useMemo và useCallback kiểm soát ghi nhớ; và useRef Duy trì các tham chiếu có thể thay đổi trên các bản render. Ưu điểm của Hook bao gồm khả năng kết hợp, ít vấn đề ràng buộc "this" hơn và dễ dàng tái sử dụng logic thông qua các hook tùy chỉnh, trong khi nhược điểm chính là cần phải học Quy tắc Hook và quản lý phụ thuộc.

Trả lời kèm ví dụ:

  • Hiệu ứng gắn kết: useEffect(() => fetchData(), []).
  • Dọn dẹp khi tháo gắn: useEffect(() => { start(); return stop; }, []).

3) Làm thế nào để bạn quyết định giữa kết xuất phía máy khách (CSR), kết xuất phía máy chủ (SSR), tạo trang tĩnh (SSG) và tái tạo tĩnh gia tăng (ISR) cho ứng dụng React?

Câu trả lời:

Chiến lược kết xuất phải được thúc đẩy bởi yêu cầu về trải nghiệm người dùng, độ mới của dữ liệu, nhu cầu SEO, hạn chế về cơ sở hạ tầng và tốc độ phát triển. CSR phù hợp với các ứng dụng có tính tương tác cao đằng sau xác thực, nơi SEO chỉ là yếu tố thứ yếu. SSR cung cấp bản vẽ đầu tiên với dữ liệu thực cho các trang công khai, cải thiện Thời gian đến Byte đầu tiên và SEO nhưng chi phí máy chủ cao hơn. SSG tính toán trước các trang tại thời điểm xây dựng để có tốc độ tuyệt vời và lưu vào bộ nhớ đệm khi dữ liệu ít thay đổi. ISR Cập nhật các trang tĩnh theo từng bước theo yêu cầu, mang lại sự cân bằng giữa tính mới mẻ và hiệu suất. Các yếu tố bao gồm khả năng lưu trữ đệm, tính cá nhân hóa, độ trễ đối với đối tượng toàn cầu và độ phức tạp trong vận hành.

Bảng: Ưu điểm và Nhược điểm

Phương pháp tiếp cận Ưu điểm Nhược điểm
CSR Lưu trữ đơn giản, tương tác phong phú Tốc độ vẽ đầu tiên chậm hơn, SEO yếu hơn
SSR SEO tuyệt vời, dữ liệu mới khi tải lần đầu Tải máy chủ cao hơn, phức tạp hơn
SSG Nhanh, rẻ, thân thiện với CDN Nội dung cũ cho đến khi xây dựng lại
ISR Nhanh chóng với độ tươi được kiểm soát Nhiều bộ phận chuyển động hơn để quản lý

4) Nên sử dụng chiến lược quản lý trạng thái nào: trạng thái cục bộ, Context, Redux hay thư viện truy vấn?

Câu trả lời:

Chọn công cụ đơn giản nhất xử lý các đặc điểm của vấn đề. Trạng thái cục bộ thành phần thông qua useState or useReducer lý tưởng cho những vấn đề UI riêng biệt. Bối cảnh có tác dụng đối với các giá trị chủ yếu là đọc, trên toàn ứng dụng (chủ đề, ngôn ngữ, người dùng hiện tại) nhưng không được tối ưu hóa cho các bản cập nhật tần suất cao trên các cây lớn. Redux hoặc các kho lưu trữ sự kiện tương tự sẽ hiệu quả khi bạn cần khả năng dự đoán, gỡ lỗi du hành thời gian, phần mềm trung gian và luồng dữ liệu đơn hướng nghiêm ngặt. Thư viện truy xuất dữ liệu (ví dụ: các mẫu theo phong cách React Query) quản lý vòng đời trạng thái máy chủ—các chiến lược lưu trữ đệm, loại bỏ trùng lặp, tìm nạp lại và đồng bộ hóa—giảm thiểu các đoạn mã mẫu. Kiến trúc thực dụng thường sử dụng trạng thái cục bộ + Bối cảnh để cấu hình + thư viện trạng thái máy chủ, dành Redux cho các quy trình làm việc phức tạp.

Ví dụ:

Bảng điều khiển sử dụng React Query để lưu trữ đệm API, Context cho chủ đề và useReducer bên trong các tiện ích phức tạp để xử lý sự kiện cục bộ.

5) Sự khác biệt giữa useEffect và useLayoutEffect là gì và khi nào thì mỗi loại được áp dụng?

Câu trả lời:

useEffect chạy sau khi trình duyệt đã vẽ xong, khiến nó phù hợp với các tác vụ không chặn như tìm nạp dữ liệu, đăng ký và ghi nhật ký. useLayoutEffect thi hành đồng bộ sau đột biến DOM nhưng trước khi vẽ, cho phép điều chỉnh phép đo và bố cục phải diễn ra mà không bị nhấp nháy (ví dụ, đọc kích thước phần tử và áp dụng lại kiểu đồng bộ). Nhược điểm của useLayoutEffect là nó có thể chặn sơn và gây hại cho khả năng phản ứng nếu sử dụng quá mức. Một nguyên tắc tốt là bắt đầu với useEffect cho các tác dụng phụ và đạt được useLayoutEffect chỉ khi bạn phải đo hoặc thay đổi bố cục đồng bộ để đảm bảo tính chính xác về mặt hình ảnh.

Trả lời kèm ví dụ:

  • useEffect: lấy thông tin người dùng sau khi kết xuất.
  • useLayoutEffect: đo kích thước của chú giải công cụ để định vị nó trước khi vẽ.

So sánh nhanh

Đặc điểm sử dụnghiệu ứng sử dụngLayoutEffect
Thời gian Sau khi sơn Trước khi sơn
Trường hợp sử dụng Dữ liệu, đăng ký Đo lường, sửa lỗi bố cục đồng bộ
Nguy cơ Có thể bị giật nhẹ nếu nặng Khối sơn nếu nặng

6) Giải thích cách thức hoạt động của khóa trong danh sách và những rủi ro khi sử dụng chỉ mục mảng.

Câu trả lời:

Khóa cho phép React đối chiếu để xác định chính xác các mục danh sách giữa các lần render. Khóa ổn định, duy nhất cho phép React sắp xếp lại, chèn hoặc xóa các mục với độ trễ DOM tối thiểu. Sử dụng chỉ số mảng Việc sử dụng khóa (as keys) sẽ gây ra vấn đề khi các mục có thể được sắp xếp lại, chèn hoặc xóa vì React có thể liên kết trạng thái trước đó với phần tử sai, gây ra các lỗi khó phát hiện (ví dụ: giá trị đầu vào hoặc hoạt ảnh không chính xác). Cách tốt nhất là sử dụng một định danh bất biến, dành riêng cho miền, chẳng hạn như ID cơ sở dữ liệu. Nếu danh sách thực sự tĩnh và không bao giờ được sắp xếp lại, chỉ số có thể được chấp nhận, nhưng đây là ngoại lệ chứ không phải quy tắc.

Ví dụ:

Bảng Kanban có thể kéo phải sử dụng ID thẻ chứ không phải chỉ mục để bảo toàn danh tính thành phần trong quá trình kéo và thả.

NHỮNG BÀI VIẾT LIÊN QUAN

7) Kỹ thuật ghi nhớ được áp dụng ở đâu trong React và ưu điểm cũng như nhược điểm của chúng là gì?

Câu trả lời:

Ghi nhớ giúp giảm thiểu các tính toán và kết xuất lại không cần thiết bằng cách sử dụng lại các kết quả trước đó khi dữ liệu đầu vào không thay đổi. Trong React, React.memo lưu trữ đầu ra thành phần, useMemo lưu trữ các phép tính tốn kém và useCallback Ghi nhớ các danh tính hàm được truyền cho các hàm con. Ưu điểm chính là hiệu suất ổn định và giảm mức sử dụng CPU khi tương tác nhiều. Nhược điểm bao gồm độ phức tạp, lỗi bộ nhớ đệm tiềm ẩn nếu các phụ thuộc bị sai và chi phí bộ nhớ.

Bảng: Các cách ghi nhớ khác nhau

Kiểu Mục đích Các yếu tố điển hình cần xem xét
React.memo(Component) Bỏ qua việc kết xuất lại nếu đạo cụ nông bằng nhau Biến động tài sản thế chấp, chi phí nuôi con
useMemo(fn, deps) Lưu trữ các giá trị tính toán Chi phí tính toán so với bộ nhớ
useCallback(fn, deps) Bản sắc hàm ổn định Độ chính xác của sự phụ thuộc

Trả lời kèm ví dụ:

Ghi nhớ một tập dữ liệu đã được lọc và sắp xếp cho một lưới bằng cách sử dụng useMemovà bao bọc các thành phần kết xuất ô bằng React.memo để tránh hiện tượng kết xuất lại.

8) Bạn thích các thành phần được kiểm soát hay không được kiểm soát cho biểu mẫu? Thảo luận về ưu điểm, nhược điểm và các loại trạng thái biểu mẫu.

Câu trả lời:

Các thành phần được kiểm soát liên kết đầu vào với trạng thái React thông qua value và onChange, cho phép xác thực, che dấu và giao diện người dùng có điều kiện được lấy từ một nguồn dữ liệu duy nhất. Ưu điểm là khả năng dự đoán và dễ dàng tích hợp với các trạng thái khác; nhược điểm bao gồm chi phí render lại cho mỗi lần nhấn phím nếu không được tối ưu hóa. Các thành phần không được kiểm soát Dựa vào DOM làm nguồn dữ liệu xác thực bằng cách sử dụng tham chiếu, giảm thiểu chi phí và kết nối đơn giản hơn cho các biểu mẫu cơ bản, nhưng lại ít tập trung hơn trong việc xác thực. Đối với các quy trình làm việc phức tạp, mô hình kết hợp thường được sử dụng, sử dụng đầu vào được kiểm soát cho các trường quan trọng và không được kiểm soát cho các vùng lớn, nhiều văn bản.

Ví dụ:

Biểu mẫu đăng ký sử dụng các trường được kiểm soát để xác thực email và mật khẩu, trong khi vùng văn bản ghi chú không được kiểm soát để giảm chi phí hiển thị lại.

9) Khi nào bạn sẽ sử dụng Context thay vì hook tùy chỉnh và sự khác biệt giữa chúng về mặt khái niệm là gì?

Câu trả lời:

Bối cảnh là một cơ chế vận chuyển cho các giá trị mà nhiều thành phần cần, tránh việc khoan prop. Nó không tự quản lý trạng thái; nó chỉ đơn giản là hiển thị trạng thái cho các thành phần con. A móc tùy chỉnh đóng gói logic có thể tái sử dụng—kết hợp trạng thái, hiệu ứng và các dịch vụ bên ngoài—trả về giá trị và hàm. Sử dụng Context để cung cấp cấu hình dùng chung, chủ yếu đọc hoặc để hiển thị một kho lưu trữ, và sử dụng các hook tùy chỉnh để triển khai hành vi của kho lưu trữ hoặc để điều phối các vấn đề như xác thực, cờ tính năng hoặc chính sách truy xuất dữ liệu. Hai phương pháp này bổ sung cho nhau: một mẫu chung là useAuth() như một móc tùy chỉnh được hỗ trợ bởi một AuthContext.

Trả lời kèm ví dụ:

AuthProvider cung cấp người dùng và mã thông báo thông qua Context; useAuth xử lý các tác dụng phụ của việc đăng nhập, làm mới và đăng xuất.

10) Bạn có thể phác thảo các chiến lược điều chỉnh hiệu suất cho các ứng dụng React lớn, bao gồm các đặc điểm của tốc độ render chậm và các điểm nóng trong vòng đời không?

Câu trả lời:

Việc điều chỉnh hiệu suất bắt đầu bằng việc đo lường. Xác định các đường dẫn chậm bằng React DevTools Profiler và bảng hiệu suất trình duyệt để xác định các điểm nóng đối chiếu và các cam kết tốn kém. Các chiến thuật bao gồm địa phương tiểu bang (giữ nhà nước gần người tiêu dùng của nó), sự ghi nhớ (React.memo, useMemo, useCallback), danh sách ảo hóa cho danh sách dài, tách mã với tải chậm để giảm gói ban đầu và giảm xóc hoặc điều tiết các sự kiện tần suất cao. Đối với dữ liệu được máy chủ hỗ trợ, hãy áp dụng bộ nhớ đệm với thư viện truy vấn và tận dụng thân thiện với sự hồi hộp các mẫu để tải mượt mà hơn. Hãy chú ý đến các điểm nóng trong vòng đời, chẳng hạn như các hiệu ứng chạy quá thường xuyên do mảng phụ thuộc rộng hoặc các thành phần được render lại do giá trị Context thay đổi thường xuyên.

Trả lời kèm ví dụ:

Ảo hóa một bảng 10,000 hàng bằng cách sử dụng thư viện cửa sổ; tải chậm các biểu đồ nặng đằng sau phân tách mã dựa trên tuyến đường để cải thiện quá trình vẽ ban đầu.

11) Sự khác biệt giữa props và state trong React là gì?

Câu trả lời:

Cả hai props và state ảnh hưởng đến cách hiển thị các thành phần, nhưng mục đích và vòng đời của chúng lại khác nhau về cơ bản. đạo cụ (viết tắt của thuộc tính) là các đầu vào không thay đổi được truyền từ thành phần cha sang thành phần con, xác định cấu hình hoặc dữ liệu để hiển thị. Chúng chảy xuống trong luồng dữ liệu một chiều của React và không bao giờ được sửa đổi bởi thành phần tiếp nhận. Tiểu bangMặt khác, có thể thay đổi và được duy trì nội bộ bởi thành phần. Nó xác định hành vi động thay đổi theo thời gian, chẳng hạn như giá trị đầu vào biểu mẫu hoặc chế độ hiển thị được bật/tắt.

Bảng sự khác biệt chính:

Hệ số đạo cụ Tiểu bang
Tính đột biến bất biến Có thể thay đổi
TINH THẦN TRÁCH NHIỆM Được cha mẹ thông qua Thuộc sở hữu của thành phần
Cập nhật phương pháp Bản kết xuất lại của phụ huynh useState or setState
Trường hợp sử dụng Cấu hình Thay đổi giao diện người dùng động
Vòng đời Tồn tại trong quá trình render Duy trì, kích hoạt hiển thị lại

Ví dụ:

A <Button color="blue" /> sử dụng đạo cụ để quyết định màu sắc, trong khi một clicked boolean ở trạng thái của nó sẽ chuyển đổi phản hồi trực quan.

12) Giải thích mô hình kiến ​​trúc thành phần trong React và những cách phân loại thành phần khác nhau.

Câu trả lời:

Các ứng dụng React tuân theo một kiến trúc dựa trên thành phần, chia nhỏ giao diện người dùng thành các khối xây dựng nhỏ, có thể tái sử dụng. Các thành phần có thể được phân loại theo mục đích và trách nhiệm:

  1. Các thành phần trình bày (ngớ ngẩn) – Tập trung vào UI, nhận dữ liệu thông qua props và hiếm khi quản lý trạng thái.
  2. Thành phần Container (Thông minh) – Xử lý logic, tìm nạp dữ liệu và quản lý trạng thái; chúng hiển thị các thành phần trình bày.
  3. Các thành phần bậc cao (HOC) – Các hàm lấy một thành phần và trả về phiên bản nâng cao với hành vi bổ sung.
  4. Thành phần tinh khiết – Tối ưu hóa hiệu suất bằng cách so sánh sơ bộ các thuộc tính và trạng thái.
  5. Thành phần chức năng so với thành phần lớp – Các thành phần chức năng (có móc) hiện được ưu tiên vì tính dễ đọc và hiệu suất.

Ví dụ:

A <UserProfile /> thành phần có thể mang tính trình bày, nhận thông tin người dùng, trong khi <UserProfileContainer /> lấy dữ liệu và quản lý vòng đời của dữ liệu.

13) React xử lý ranh giới lỗi như thế nào và tại sao chúng lại quan trọng?

Câu trả lời:

Ranh giới lỗi là các thành phần React đặc biệt bắt JavaLỗi tập lệnh ở bất kỳ đâu trong cây thành phần con của chúng trong quá trình render, phương thức vòng đời hoặc hàm tạo. Chúng ngăn chặn toàn bộ ứng dụng bị sập bằng cách cô lập lỗi vào các cây con cụ thể. Bạn có thể triển khai một cây con bằng cách sử dụng componentDidCatch(error, info) và static getDerivedStateFromError() trong một thành phần lớp.

Ưu điểm:

  • Duy trì tính ổn định của UI bằng cách hiển thị UI dự phòng.
  • Ghi lại và ghi lại lỗi để phân tích.
  • Ngăn chặn việc ngắt kết nối liên tiếp.

Ví dụ:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}

14) React Fragments là gì và chúng khác với wrapper như thế nào các yếu tố?

Câu trả lời:

Phản ứng Mảnh vỡ (<></>) cho phép bạn nhóm nhiều phần tử mà không cần thêm nút bổ sung vào DOM. Điều này rất cần thiết để có cấu trúc gọn gàng hơn, đặc biệt là trong danh sách, bảng và HTML ngữ nghĩa, nơi các trình bao bọc bổ sung có thể gây ra các vấn đề về bố cục hoặc khả năng truy cập. Không giống như trình bao bọc <div>s, Các đoạn mã không được hiển thị trên DOM và do đó có lợi thế về hiệu suất và ngữ nghĩa.

Ví dụ:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

Bảng chênh lệch:

Hệ số Miếng <div> Bao
Đầu ra DOM Không áp dụng Thêm nút bổ sung
Trường hợp sử dụng Nhóm cấu trúc Kiểu dáng hoặc bố cục
HIỆU QUẢ Hơn Chi phí thấp

15) Bạn sẽ sử dụng React Hook nào để tối ưu hóa hiệu suất và tại sao?

Câu trả lời:

Các thành phần React nhạy cảm với hiệu suất thường dựa vào móc ghi nhớ và lười tải để giảm thiểu công việc dư thừa. Các móc nối phổ biến bao gồm:

  • useMemo → Lưu trữ các kết quả tốn nhiều tài nguyên tính toán.
  • useCallback → Ngăn chặn các kết xuất con không cần thiết do thay đổi danh tính hàm.
  • useTransition → Hoãn các bản cập nhật không khẩn cấp để có giao diện người dùng mượt mà hơn.
  • useDeferredValue → Trì hoãn các phép tính nặng cho đến sau khi có tương tác ngay lập tức.

Ví dụ:

Một lưới dữ liệu lớn sử dụng useMemo đối với kết quả đã lọc có thể giảm mức tiêu thụ CPU tới 50% hoặc hơn.

Ưu điểm:

  • Giảm thiểu việc kết xuất lãng phí.
  • Giữ cho giao diện người dùng phản hồi nhanh khi tải.

Bất lợi:

  • Yêu cầu độ chính xác của sự phụ thuộc; lỗi bộ nhớ đệm cũ có thể xảy ra nếu quản lý không đúng cách.

16) React Portals là gì và ưu điểm của chúng là gì?

Câu trả lời:

Cổng thông tin cho phép các thành phần React hiển thị các thành phần con vào một nút DOM bên ngoài hệ thống phân cấp cha của chúng, thường là đối với các hộp thoại, chú giải công cụ hoặc danh sách thả xuống phải "thoát" khỏi các ngữ cảnh tràn hoặc xếp chồng một cách trực quan. Được triển khai bằng cách sử dụng ReactDOM.createPortal(child, container), chúng duy trì tính nhất quán của sự kiện, do đó trình xử lý sự kiện hoạt động như thể phần tử vẫn nằm trong hệ thống phân cấp ban đầu của nó.

Bảng ưu điểm:

Lợi thế Mô tả Chi tiết
Độc lập về cấu trúc Kết xuất bên ngoài cây cha
Kiểm soát CSS/Xếp chồng Tránh overflow: hidden hoặc các vấn đề về chỉ số z
Sự kiện lan truyền Các sự kiện tổng hợp của React vẫn bong bóng chính xác
Tái sử dụng Lý tưởng cho lớp phủ toàn cầu

Ví dụ:

createPortal(<ModalContent />, document.getElementById('modal-root'));

17) Giải thích cách React Router quản lý điều hướng và trạng thái giữa các trang.

Câu trả lời:

React Router là một thư viện định tuyến khai báo đồng bộ hóa giao diện người dùng với URL của trình duyệt. Nó sử dụng API lịch sử để thao tác lịch sử phiên mà không cần tải lại toàn bộ trang. Các khái niệm cốt lõi bao gồm tuyến đường, Liên kếtvà Cửa hàng cho định tuyến lồng nhau. Thư viện hỗ trợ các tuyến đường động, Tham số URLvà móc dẫn hướng (useNavigate, useParams, useLocation). React Router v6 đã giới thiệu cú pháp đơn giản hóa và API dữ liệu cho loader và hoạt động chức năng, cải thiện tích hợp SSR và quản lý trạng thái.

Ví dụ:

<Route path="/user/:id" element={<UserProfile />} />

Lợi ích:

  • Cho phép điều hướng một trang.
  • Duy trì vị trí cuộn và lịch sử.
  • Tích hợp hoàn hảo với tải chậm để có hiệu suất tốt hơn.

18) Có những cách nào khác nhau để xử lý tác dụng phụ trong ứng dụng React?

Câu trả lời:

Tác dụng phụ đề cập đến các hành động ảnh hưởng đến thứ gì đó nằm ngoài phạm vi của thành phần (lệnh gọi API, thao tác DOM, đăng ký). Các công cụ chính bao gồm:

  1. useEffect cho các hiệu ứng phía máy khách sau khi kết xuất.
  2. Trình xử lý sự kiện để tạo hiệu ứng do người dùng điều khiển.
  3. móc tùy chỉnh để tái sử dụng logic hiệu ứng (ví dụ, useFetch).
  4. middleware (như Redux Saga hoặc Thunk) để phối hợp bất đồng bộ phức tạp.
  5. React Query hoặc SWR để quản lý trạng thái máy chủ và vòng đời tải lại tự động.

Ví dụ:

A useEffect lấy dữ liệu một lần khi gắn kết:

useEffect(() => { fetchData(); }, []);

Ưu điểm:

Quản lý bất đồng bộ đơn giản hơn, đóng gói tốt hơn và kiểm soát vòng đời rõ ràng hơn.

19) React là một framework hay một thư viện? Hãy thảo luận về các yếu tố tạo nên sự khác biệt.

Câu trả lời:

React chính thức là một thư viện, không phải là một khuôn khổ đầy đủ. Nó chỉ tập trung vào lớp xem, cung cấp khả năng trừu tượng hóa kết xuất, trạng thái và thành phần mà không cần thực thi định tuyến, truy xuất dữ liệu hoặc xây dựng cấu trúc.

Bảng so sánh:

Hệ số Thư viện (React) Khung (Angular, Vue)
Phạm vi Xem kết xuất Kiến trúc MVC đầy đủ
Khăng khăng Thấp Cao
Kiểm soát Do nhà phát triển điều khiển Được thúc đẩy bởi khuôn khổ
Linh hoạt Cao Bị giới hạn bởi các quy ước
Đường cong học tập Trung bình Cao hơn do tính phức tạp

Hệ sinh thái của React (Redux, Router, Query, Next.js) thực sự hình thành nên một “siêu khung”, cung cấp khả năng kết hợp theo mô-đun cho phép các nhà phát triển xây dựng kiến ​​trúc riêng của họ.

20) Khi nào bạn nên sử dụng React.lazy và Suspense và ưu điểm của chúng là gì?

Câu trả lời:

React.lazy cho phép tách mã bằng cách tải các thành phần động chỉ khi cần thiết, trong khi Suspense cung cấp giao diện người dùng dự phòng cho đến khi thành phần sẵn sàng. Sự kết hợp này cải thiện hiệu suất tải ban đầu và khả năng phản hồi của người dùng.

Ví dụ:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

Bảng ưu điểm:

Lợi thế Giải thích
HIỆU QUẢ Tải mã theo yêu cầu
Kinh nghiệm người dùng Tải lại nhẹ nhàng
Kích thước bó Gói ban đầu nhỏ hơn
Đơn giản API React gốc, thiết lập tối thiểu

Thực hành tốt nhất:

  • Gói nhiều thành phần lười biếng vào một ranh giới Suspense.
  • Sử dụng các chỉ báo dự phòng có ý nghĩa để hỗ trợ khả năng truy cập.

21) Giải thích React Server Components (RSC) là gì và ưu điểm của chúng.

Câu trả lời:

React Server Components (RSC) là một cải tiến lớn được giới thiệu để nâng cao hiệu suất và trải nghiệm của nhà phát triển bằng cách cho phép các thành phần hiển thị trên máy chủ mà không gửi JavaKịch bản cho khách hàng. Chúng thực hiện hoàn toàn trên máy chủ, truy xuất dữ liệu, đọc từ cơ sở dữ liệu hoặc thực hiện các hoạt động I/O một cách an toàn trước khi truyền phát đầu ra được tuần tự hóa đến máy khách.

Ưu điểm:

  • Kích thước bó nhỏ hơn — Không có JS máy khách cho logic chỉ dành cho máy chủ.
  • Cải thiện hiệu suất — Việc truy xuất dữ liệu từ phía máy chủ giúp giảm thiểu hiện tượng thác nước.
  • Bảo mật — Mã nhạy cảm không bao giờ đến được trình duyệt.
  • Bộ nhớ đệm tốt hơn — Các thành phần máy chủ có thể được lưu vào bộ nhớ đệm ở rìa.

Ví dụ:

A <ProductList /> thành phần máy chủ có thể lấy dữ liệu từ cơ sở dữ liệu trực tiếp và chuyển kết quả đến <ProductCard /> thành phần khách hàng.

22) Sự khác biệt giữa phản ứng hydrat hóa và hòa giải là gì?

Câu trả lời:

Mặc dù cả hai thuật ngữ đều liên quan đến việc React cập nhật UI, nhưng mục đích của chúng lại khác nhau:

  • Hòa giải là quá trình so sánh cây DOM ảo với phiên bản trước đó để xác định tập hợp tối thiểu các bản cập nhật DOM.
  • Thủy hóa tác dụngmặt khác, là quá trình gắn các trình lắng nghe sự kiện và cấu trúc bên trong của React vào HTML được máy chủ hiển thị ở phía máy khách, biến đánh dấu tĩnh thành ứng dụng tương tác hoàn toàn.

Bảng so sánh:

Hệ số Hòa giải Thủy hóa tác dụng
Cò súng Khách hàng kết xuất lại Tải trang ban đầu (SSR)
Mục đích Cập nhật DOM hiệu quả Làm cho HTML SSR tương tác
Phạm vi Sự khác biệt của DOM ảo Liên kết sự kiện + gắn lại trạng thái
Tần số Nhiều lần Một lần sau khi render SSR

Ví dụ:

Sau khi ứng dụng Next.js gửi HTML được hiển thị trước, React hydrat để các thành phần phản hồi lại các sự kiện mà không cần phải hiển thị lại mọi thứ.

23) Concurrent Rendering cải thiện trải nghiệm người dùng trong React 18+ như thế nào?

Câu trả lời:

Kết xuất đồng thời cho phép React ngắt, tạm dừng hoặc tiếp tục quá trình kết xuất dựa trên mức độ ưu tiên của người dùng. Điều này ngăn giao diện người dùng bị treo trong quá trình tính toán hoặc kết xuất lại dữ liệu. Các tính năng như useTransition và useDeferredValue tận dụng khả năng này để tách biệt cập nhật khẩn cấp (giống như gõ) từ không khẩn cấp những cái đó (giống như lọc).

Lợi ích:

  • Tương tác mượt mà và phản hồi nhanh.
  • Cắt thời gian để tránh chặn luồng chính.
  • Ưu tiên có thể dự đoán để có UX tốt hơn.

Ví dụ:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

Ở đây, việc nhập liệu vẫn mượt mà ngay cả khi lọc các tập dữ liệu lớn vì React lên lịch các bản cập nhật không khẩn cấp đồng thời.

24) Có những cách nào khác nhau để thực hiện thử nghiệm trong ứng dụng React?

Câu trả lời:

Kiểm thử phản ứng có thể được phân loại thành đơn vị, hội nhậpvà Cuối cùng đến cuối các cấp.

Bảng phương pháp thử nghiệm:

Kiểu Công cụ Mục đích
đơn vị có Kiểm tra các chức năng/thành phần riêng biệt
Tích hợp Thư viện thử nghiệm phản ứng Kiểm tra tương tác UI và thay đổi trạng thái
E2E Cypress / Nhà viết kịch Kiểm tra luồng người dùng trong trình duyệt thực tế

Thực hành tốt nhất:

  • Thích hơn Thư viện thử nghiệm phản ứng trên Enzyme (hiện đại, hướng đến DOM).
  • API giả sử dụng msw (Nhân viên dịch vụ giả).
  • Tránh kiểm tra chi tiết triển khai—tập trung vào hành vi.

Ví dụ:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

25) Công cụ xây dựng và bundler nào được sử dụng phổ biến nhất với React và sự khác biệt của chúng là gì?

Câu trả lời:

React có thể tích hợp với nhiều trình đóng gói và trình biên dịch, mỗi trình được tối ưu hóa cho các trường hợp sử dụng khác nhau.

Bảng so sánh:

Công cụ Đặc điểm Ưu điểm Nhược điểm
Gói web Cấu hình cao Trưởng thành, giàu plugin Thiết lập phức tạp
Sống Máy chủ phát triển nhanh như chớp dựa trên ESM HMR tức thì, cú pháp hiện đại Hỗ trợ plugin cũ hạn chế
Bưu kiện Zero-config Tự động tối ưu hóa Less linh hoạt
xây dựng Trình biên dịch dựa trên Go Cực nhanh Ít plugin hệ sinh thái hơn

Ví dụ:

Các dự án hiện đại thường áp dụng Sống cho tốc độ phát triển và xây dựng trong quy trình CI/CD để xây dựng sản phẩm hiệu quả.

26) Next.js mở rộng khả năng của React như thế nào?

Câu trả lời:

Next.js là một Khung phản ứng cung cấp kiến ​​trúc dựa trên ý kiến ​​cho định tuyến, SSR và tạo tĩnh. Nó giới thiệu các mô hình kết xuất lai, tuyến API và các tính năng triển khai sẵn sàng cho biên.

Ưu điểm:

  • Built-in SSR/SSG/ISR hỗ trợ.
  • Bộ định tuyến ứng dụng với các thành phần máy chủ React.
  • Tối ưu hóa hình ảnh và trung gian về hiệu suất và bảo mật.
  • Tuyến API dễ dàng cho các chức năng không có máy chủ.

Ví dụ:

app/page.js đối với các trang được hiển thị bằng SSR; app/api/route.js cho các điểm cuối của máy chủ.

Trong bản tóm tắtNext.js cho phép tạo ra các ứng dụng React đạt chuẩn sản xuất với cấu hình tối thiểu.

27) Một số lỗi hiệu suất phổ biến trong React là gì và làm thế nào để tránh chúng?

Câu trả lời:

Những cạm bẫy hiệu suất phổ biến của React bao gồm:

  1. Kết xuất lại không cần thiết — Sửa lỗi bằng cách sử dụng React.memo hoặc tách các thành phần.
  2. Tạo đối tượng/mảng nội tuyến - Sử dụng useMemo để có tài liệu tham khảo ổn định.
  3. Danh sách lớn — Triển khai cửa sổ (react-window, react-virtualized).
  4. Tính toán nặng nề — Ghi nhớ hoặc chuyển giao cho các nhân viên web.
  5. Lạm dụng ngữ cảnh — Cập nhật thường xuyên sẽ lan truyền sâu rộng; ưu tiên trạng thái phái sinh.

Ví dụ:

Nếu bạn vượt qua { a: 1 } khi nhúng vào một thành phần được ghi nhớ, nó sẽ render lại trên mỗi lần render cha. Khắc phục bằng cách ghi nhớ đối tượng.

Bảng mẹo hiệu suất:

Vấn đề Kỹ thuật tối ưu hóa
Kết xuất lại React.memo, useCallback
Những tính toán tốn kém useMemo, Công nhân web
Bộ dữ liệu lớn Ảo hóa
Cập nhật ngữ cảnh thường xuyên Bản địa hóa tiểu bang

28) Giải thích sự khác biệt giữa useReducer và useState.

Câu trả lời:

Cả hai hook đều quản lý trạng thái, nhưng chúng khác nhau về độ phức tạp và khả năng kiểm soát.

  • useState lý tưởng cho các quá trình chuyển đổi trạng thái đơn giản, riêng biệt.
  • useReducer tập trung logic trạng thái phức tạp trong một chức năng giảm tốc, Sử dụng dispatch hành động để cập nhật có thể dự đoán được.

Bảng so sánh:

Hệ số sử dụngState sử dụngReducer
cú pháp [value, setValue] [state, dispatch]
phức tạp Đơn giản Trung bình đến phức tạp
Trường hợp sử dụng Các quốc gia độc lập Các trạng thái liên quan hoặc lồng nhau
Gỡ lỗi Less dài dòng Dễ dàng hơn thông qua các hành động đã ghi lại
Ví dụ Chuyển đổi biểu mẫu Xác thực biểu mẫu hoặc biểu mẫu nhiều bước

Ví dụ:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

29) Làm thế nào để cải thiện khả năng truy cập (a11y) trong các ứng dụng React?

Câu trả lời:

Khả năng truy cập đảm bảo tất cả người dùng, kể cả người khuyết tật, đều có thể sử dụng ứng dụng của bạn một cách hiệu quả. React hỗ trợ khả năng truy cập thông qua đánh dấu ngữ nghĩa và thuộc tính ARIA.

Thực hành tốt nhất:

  • Sử dụng HTML ngữ nghĩa (<button> vs <div onClick>).
  • Quản lý tiêu điểm bằng cách sử dụng ref và tabIndex.
  • Sử dụng vai trò ARIA cho các thành phần động.
  • Đảm bảo độ tương phản màu sắc và lựa chọn văn bản thay thế cho hình ảnh.
  • Tận dụng các công cụ như eslint-plugin-jsx-a11y và lõi rìu để kiểm toán.

Ví dụ:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

Ưu điểm:

  • Tiếp cận được nhiều đối tượng hơn.
  • Cải thiện SEO.
  • Tuân thủ các tiêu chuẩn WCAG.

30) Bạn có thể mô tả sự khác biệt giữa phân tách mã và tải lười biếng và khi nào nên sử dụng từng loại không?

Câu trả lời:

Cả hai kỹ thuật đều tối ưu hóa kích thước gói và hiệu suất tải nhưng khác nhau ở thời gian thực hiện.

  • Tách mã chia các bó lớn thành các phần nhỏ hơn có thể được tải độc lập.
  • Lười tải trì hoãn việc tải các khối đó cho đến khi chúng được yêu cầu.

Bảng so sánh:

Hệ số Phân tách mã Đang tải Lazy
Định nghĩa Chia mã thành các phần Tải các khối theo yêu cầu
Công cụ Webpack, Vite React.lazy, năng động import()
Mục đích Tối ưu hóa kích thước gói Cải thiện hiệu suất thời gian chạy
Thực hiện Thời gian xây dựng Runtime

Ví dụ:

const Settings = React.lazy(() => import('./Settings'));

Khi kết hợp với nhau, các kỹ thuật này sẽ giảm Thời gian tương tác và tăng tốc độ cảm nhận của các ứng dụng lớn.

31) Giải thích khái niệm Render Props và sự khác biệt giữa nó với Higher-Order Component (HOC).

Câu trả lời:

Render Đạo cụ là một mẫu trong React trong đó một thành phần chấp nhận một chức năng như một đạo cụ cho biết phải render cái gì. Điều này cho phép logic thành phần được chia sẻ giữa nhiều thành phần mà không bị trùng lặp.

Mặt khác, HOCs bọc một thành phần và trả về phiên bản nâng cao với các thuộc tính hoặc hành vi được đưa vào.

Bảng so sánh:

Hệ số Render Đạo cụ HOC
Triển khai hệ thống Chức năng như con Thành phần đóng gói chức năng
Sáng tác Kiểm soát nội tuyến Gói khai báo
Dễ đọc Thường rõ ràng hơn Có thể gây ra tình trạng khó chịu
Trường hợp sử dụng Logic kết xuất động Mối quan tâm xuyên suốt

Ví dụ:

<DataProvider render={data => <UserList users={data} />} />

Render Props mang lại tính linh hoạt tốt hơn và tránh xung đột tên thường gặp trong HOC.

32) Có những loại móc câu tùy chỉnh nào và ưu điểm của chúng?

Câu trả lời:

Các hook tùy chỉnh đóng gói logic có thể tái sử dụng, kết hợp trạng thái, tác dụng phụ và tiện ích. Chúng cải thiện khả năng tái sử dụng mã, phân tách các mối quan tâm và khả năng kiểm thử.

Các loại và ví dụ:

  1. Móc quản lý trạng thái – useToggle, useForm.
  2. Móc lấy dữ liệu – useFetch, useQuery.
  3. Móc UI/UX – useWindowSize, useDarkMode.
  4. Móc tích hợp – useLocalStorage, useMediaQuery.
  5. Móc hiệu suất – useDebounce, useThrottle.

Ưu điểm:

  • Tái sử dụng logic tập trung.
  • Các thành phần sạch hơn.
  • Kiểm tra độc lập.

Ví dụ:

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
  return [value, setValue];
}

33) Bạn xử lý rò rỉ bộ nhớ trong ứng dụng React như thế nào?

Câu trả lời:

Rò rỉ bộ nhớ xảy ra khi các thành phần chưa được gắn kết vẫn giữ tham chiếu đến tài nguyên hoặc đăng ký. Điều này làm giảm hiệu suất và gây ra hành vi không thể đoán trước.

Kỹ thuật phòng ngừa:

  1. Hiệu ứng dọn dẹp in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
  2. Hủy các cuộc gọi không đồng bộ sử dụng AbortController.
  3. Tránh giữ lại các kết thúc cũ tham chiếu đến các props/state cũ.
  4. Hủy đăng ký sự kiện hoặc ổ cắm khi tháo gắn.
  5. Sử dụng React Profiler để phát hiện sự phát triển chậm của trí nhớ.

Ví dụ:

Trong ứng dụng trò chuyện, hãy luôn ngắt kết nối trình lắng nghe ổ cắm khi người dùng rời khỏi phòng trò chuyện.

34) Thực hành tốt nhất để quản lý biểu mẫu trong các ứng dụng React lớn là gì?

Câu trả lời:

Việc quản lý biểu mẫu trong ứng dụng React quy mô doanh nghiệp đòi hỏi sự cân bằng giữa khả năng kiểm soát, hiệu suất và khả năng bảo trì.

Thực hành tốt nhất:

  • Sử dụng các thư viện như hình thức, Biểu mẫu React Hook, hoặc là Hình thức cuối cùng để xác nhận và đăng ký thực địa.
  • Nhóm các trường liên quan bằng cách sử dụng các thành phần hoặc ngữ cảnh lồng nhau.
  • Rắc bột xác thực lược đồ (Vâng, Zod) để đảm bảo tính nhất quán.
  • Loại bỏ các xác thực nặng hoặc kiểm tra API.
  • Giữ trạng thái biểu mẫu ở dạng cục bộ trừ khi cần thiết ở dạng toàn cục.

Ví dụ:

React Hook Form giảm thiểu việc kết xuất lại bằng cách cô lập trạng thái đầu vào.

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

35) Những mẫu thiết kế nào hữu ích nhất trong quá trình phát triển React và đặc điểm của chúng là gì?

Câu trả lời:

React tự nhiên phù hợp với nhiều mẫu thiết kế phần mềm để tạo nên kiến ​​trúc UI có khả năng bảo trì và mở rộng.

Họa tiết Mô tả Chi tiết Ví dụ
Container-Presenter Logic riêng biệt (container) khỏi UI (presenter) DataContainer → UIComponent
Kiểm soát-Không kiểm soát Quản lý dữ liệu biểu mẫu thông qua trạng thái so với DOM Formik so với đầu vào thô
Thành phần hợp chất Cha mẹ kiểm soát thành phần con <Tabs><Tab /></Tabs>
Mẫu nhà cung cấp Chia sẻ trạng thái thông qua Ngữ cảnh Nhà cung cấp chủ đề
Mẫu móc Tái sử dụng logic trạng thái useAuth, useFetch

Ví dụ:

A Tabs thành phần phơi bày bối cảnh vì vậy <Tab> trẻ em tự động đăng ký bản thân — một ứng dụng sạch sẽ của Thành phần hợp chất mô hình.

36) Sự khác biệt chính giữa React 18 và React 19 là gì?

Câu trả lời:

React 19 được xây dựng dựa trên nền tảng đồng thời của React 18 với nhiều khả năng mới đáng kể.

Tính năng Phản ứng 18 Phản ứng 19
Kết xuất đồng thời Giới thiệu Cải thiện với Suspense tốt hơn
Thành phần máy chủ Thử nghiệm Ổn định và tích hợp
API hành động Không có Tiêu chuẩn mới để xử lý các hành động biểu mẫu
Tải tài sản Hướng dẫn sử dụng Tự động tải tài nguyên
Xử lý lỗi được cải thiện Cơ bản Hạt có móc ranh giới

Lợi ích chính:

React 19 tập trung vào đột biến dữ liệu đơn giản hơn, hành động biểu mẫu tích hợpvà kiểm soát không đồng bộ nâng cao, giúp SSR và quá trình hydrat hóa diễn ra liền mạch hơn.

37) Micro-Frontend hoạt động như thế nào? ArchiKiến trúc tích hợp với React và lợi thế của nó là gì?

Câu trả lời:

Micro-frontend chia một ứng dụng web lớn thành các module front-end độc lập, có thể triển khai. Trong hệ sinh thái React, mỗi micro-frontend là một ứng dụng độc lập có thể được tích hợp thông qua Liên đoàn mô-đun, iframe, hoặc là trình tải thời gian chạy tùy chỉnh.

Ưu điểm:

  • Triển khai và mở rộng độc lập.
  • Quyền tự chủ của nhóm trên nhiều ngăn xếp công nghệ.
  • Xây dựng đường ống nhanh hơn.

Ví dụ:

Sử dụng Liên kết mô-đun Webpack, các nhóm có thể hiển thị các thành phần React trên nhiều ứng dụng một cách linh hoạt:

exposes: { './NavBar': './src/NavBar' }

Nhược điểm:

  • Sự phức tạp của việc quản lý trạng thái được chia sẻ.
  • Chi phí hiệu suất từ ​​các gói riêng biệt.

38) Bạn cân nhắc những yếu tố nào khi mở rộng quy mô ứng dụng React trong giai đoạn sản xuất?

Câu trả lời:

Việc mở rộng ứng dụng React liên quan đến các cân nhắc về mặt kỹ thuật, kiến ​​trúc và vận hành.

Các yếu tố chính:

  1. Cấu trúc mã — áp dụng monorepos (Nx/Turborepo) để chia sẻ mã mô-đun.
  2. Quản lý nhà nước — phân đoạn trạng thái cục bộ so với toàn cầu so với trạng thái máy chủ.
  3. HIỆU QUẢ — tải chậm, ghi nhớ, lưu trữ đệm CDN.
  4. Giám sát — sử dụng Sentry, Datadog hoặc LogRocket để biết lỗi và số liệu.
  5. Kiểm thử & CI/CD — đường ống tự động và thử nghiệm hồi quy trực quan.

Ví dụ:

Một nền tảng thương mại điện tử lớn mở rộng quy mô ứng dụng React bằng Next.js cho SSR, Redux Toolkit cho trạng thái có thể dự đoán được và micro-frontend cho các ngành dọc riêng biệt.

39) Làm thế nào để kiểm tra các thành phần React sử dụng hành vi không đồng bộ?

Câu trả lời:

Kiểm tra các thành phần React không đồng bộ yêu cầu phải đồng bộ hóa giữa trình chạy thử nghiệm và các bản cập nhật trạng thái của thành phần.

Thực hành tốt nhất:

  • Sử dụng waitFor or findBy* truy vấn trong Thư viện kiểm thử React.
  • Giả lập các cuộc gọi tìm nạp hoặc API bằng cách sử dụng msw.
  • Thích hơn bộ đếm thời gian giả (jest.useFakeTimers()) cho các hiệu ứng dựa trên thời gian chờ.

Ví dụ:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Điều này đảm bảo rằng bài kiểm tra sẽ chờ các bản cập nhật bất đồng bộ của React trước khi đưa ra khẳng định.

40) Giải thích cách bạn thiết kế một cấu trúc dự án React có khả năng bảo trì và quy mô lớn.

Câu trả lời:

Một dự án React có khả năng mở rộng phải cân bằng được tính mô-đun, tính rõ ràng và sự hợp tác của nhóm.

Cấu trúc thư mục được đề xuất:

src/
 ├── components/         # Reusable UI elements
 ├── features/           # Feature-specific modules
 ├── hooks/              # Custom reusable hooks
 ├── context/            # Global providers
 ├── pages/              # Route-level views
 ├── services/           # API and utilities
 ├── assets/             # Static resources
 ├── tests/              # Unit & integration tests
 └── index.js

Thực hành tốt nhất:

  • Sử dụng lệnh nhập tuyệt đối với bí danh đường dẫn.
  • Duy trì kiểm tra lỗi nghiêm ngặt (ESLint + Prettier).
  • Sử dụng TypeScript để đảm bảo an toàn loại.
  • Áp dụng ranh giới thành phần bằng thiết kế nguyên tử hoặc phân chia dựa trên tính năng.

Ví dụ:

Trong thiết lập thực tế, tính năng "Người dùng" có thể bao gồm UserSlice.js, UserAPI.js, UserCard.jsxvà User.test.js, tất cả trong src/features/user/.

🔍 Những câu hỏi phỏng vấn React.js hàng đầu với các tình huống thực tế và câu trả lời chiến lược

1) Sự khác biệt chính giữa thành phần chức năng và thành phần lớp trong React.js là gì?

Mong đợi từ ứng viên: Người phỏng vấn muốn kiểm tra sự hiểu biết của bạn về kiến ​​trúc thành phần React và các phương pháp hay nhất hiện đại.

Câu trả lời ví dụ:

“Các thành phần chức năng đơn giản hơn và dựa vào các móc để quản lý trạng thái và các phương thức vòng đời, trong khi các thành phần lớp sử dụng this và các phương pháp vòng đời như componentDidMount. Các thành phần chức năng thường được ưa chuộng hiện nay vì chúng thúc đẩy mã sạch hơn, dễ kiểm tra hơn và hoạt động tốt hơn nhờ quá trình tối ưu hóa trong quá trình hiển thị của React.”

2) Bạn có thể giải thích cách Virtual DOM hoạt động trong React không?

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá khả năng nắm bắt cơ chế hiệu suất cốt lõi của React của bạn.

Câu trả lời ví dụ:

“DOM ảo là một biểu diễn trong bộ nhớ của DOM thật. Khi trạng thái của một thành phần thay đổi, React sẽ cập nhật DOM ảo trước, so sánh với phiên bản trước đó bằng một quy trình gọi là 'diffing', sau đó chỉ cập nhật những phần DOM thật đã thay đổi. Cách tiếp cận này cải thiện hiệu suất bằng cách giảm thiểu thao tác trực tiếp lên DOM.”

3) Bạn quản lý trạng thái trong ứng dụng React quy mô lớn như thế nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn biết về kinh nghiệm của bạn với các kỹ thuật và công cụ quản lý trạng thái.

Câu trả lời ví dụ:

“Trong các ứng dụng lớn, tôi thường sử dụng các thư viện quản lý trạng thái tập trung như Redux hoặc Zustand. Redux cung cấp luồng dữ liệu có thể dự đoán được và giúp việc gỡ lỗi dễ dàng hơn thông qua các công cụ gỡ lỗi du hành thời gian. Đối với các ứng dụng đơn giản hơn, tôi thích sử dụng Context API và các hook để tránh sự phức tạp không cần thiết.”

4) Mô tả thời điểm bạn tối ưu hóa hiệu suất React.

Mong đợi từ ứng viên: Người phỏng vấn muốn hiểu kinh nghiệm thực tế của bạn về tối ưu hóa hiệu suất.

Câu trả lời ví dụ:

“Trong vai trò trước đây của tôi, ứng dụng của chúng tôi đã hiển thị lại quá mức do những thay đổi trạng thái không cần thiết. Tôi đã sử dụng React.memo và useCallback hook để ngăn chặn việc render lại không cần thiết. Tôi cũng đã phân tích hiệu suất bằng React Profiler và xác định các thành phần cần ghi nhớ, giúp giảm thời gian render gần 30%.”

5) Bạn xử lý các tác dụng phụ trong React như thế nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá sự hiểu biết của bạn về các hook và quản lý vòng đời.

Câu trả lời ví dụ:

“Tôi xử lý các tác dụng phụ như lệnh gọi API hoặc thao tác DOM bằng cách sử dụng useEffect hook. Hook cho phép tôi chỉ định các phụ thuộc, đảm bảo hiệu ứng chỉ chạy khi các phụ thuộc đó thay đổi. Điều này giúp duy trì hành vi có thể dự đoán được và tránh vòng lặp vô hạn.

6) Hãy kể cho tôi nghe về một lỗi khó mà bạn gặp phải trong một dự án React và cách bạn giải quyết nó.

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá kỹ năng giải quyết vấn đề và gỡ lỗi của bạn.

Câu trả lời ví dụ:

“Ở vị trí trước đây, tôi đã gặp lỗi cập nhật trạng thái không được phản ánh trong giao diện người dùng. Sau khi điều tra, tôi nhận ra vấn đề là do việc thay đổi trực tiếp đối tượng trạng thái thay vì tạo một bản sao mới. Tôi đã tái cấu trúc mã để sử dụng các bản cập nhật bất biến, điều này đã giải quyết được vấn đề và cải thiện tính nhất quán của dữ liệu.”

7) Bạn xử lý xác thực biểu mẫu trong ứng dụng React như thế nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn xem bạn có hiểu cách triển khai xác thực đầu vào của người dùng hay không.

Câu trả lời ví dụ:

“Tôi thường sử dụng các thành phần được kiểm soát để quản lý dữ liệu đầu vào của biểu mẫu, kết hợp với các thư viện như Formik hoặc React Hook Form để xác thực. Những công cụ này giúp đơn giản hóa việc xử lý lỗi, quản lý trạng thái biểu mẫu và tích hợp với các thư viện xác thực của bên thứ ba như Yup.”

8) Mô tả một tình huống mà bạn phải cộng tác với các nhà phát triển backend khi làm việc trên một dự án React.

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá kỹ năng làm việc nhóm và giao tiếp của bạn.

Câu trả lời ví dụ:

“Trong vai trò gần đây nhất, tôi đã hợp tác chặt chẽ với các nhà phát triển back-end để thiết kế REST API cho một ứng dụng bảng điều khiển. Chúng tôi đã thống nhất về định dạng dữ liệu và điểm cuối trong giai đoạn phát triển ban đầu. Tôi cũng đã tạo các phản hồi giả lập để tiếp tục phát triển front-end trong khi back-end đang được xây dựng, đảm bảo tích hợp trơn tru sau này.”

9) Làm thế nào để đảm bảo các thành phần React của bạn có thể tái sử dụng và bảo trì được?

Mong đợi từ ứng viên: Người phỏng vấn muốn biết về cách tiếp cận của bạn đối với thiết kế thành phần và khả năng mở rộng.

Câu trả lời ví dụ:

“Tôi tuân theo nguyên tắc xây dựng các thành phần nhỏ, tập trung, đảm nhiệm một nhiệm vụ. Tôi cũng sử dụng props để tăng tính linh hoạt, và tôi luôn định dạng theo mô-đun bằng CSS-in-JS hoặc styled-components. Điều này đảm bảo các thành phần có thể dễ dàng tái sử dụng và bảo trì trong toàn bộ dự án.”

10) Bạn cập nhật xu hướng và phương pháp hay nhất của React.js bằng cách nào?

Mong đợi từ ứng viên: Người phỏng vấn muốn đánh giá cam kết học tập liên tục của bạn.

Câu trả lời ví dụ:

Tôi luôn cập nhật thông tin bằng cách theo dõi tài liệu chính thức và các blog cộng đồng của React. Tôi cũng xem các bài thuyết trình từ các hội nghị React như React Conf và nghe các podcast như 'React Podcast'. Những tài nguyên này giúp tôi luôn cập nhật về các tính năng mới như render đồng thời và Server Components.

Tóm tắt bài viết này với: