Mở đầu

Bài viết này mình sẽ liệt kê một vài câu hỏi thường xuyên được hỏi khi phỏng vấn ReactJS.

Các bạn có thể xem thêm một số câu hỏi khác tại https://viblo.asia/p/bo-cau-hoi-phong-van-intern-fresher-cho-front-end-tu-a-z-Do754rgVZM6.

Nội dung

Javascript

1. This là gì ?

2. Có những loại biến nào, sự khác nhau của chúng

Var, Let: có thể reassigned

Const: không thể reassigned

3. Trình bày các loại scope

Global: Bao gồm biến var, const, let được khai báo ở ngoài cùng file javascript.

Block code: Bao gồm biến let, const được khai báo trong block code như: if else, switch case sẽ có phạm vi block code, trường hợp var được khai báo trong block code sẽ có phạm vi global.

Local: Còn được gọi là phạm vi hàm, bao gồm let, const, var hoặc hàm được khai báo trong một hàm sẽ tạo ra phạm vi hàm

4. Khái niệm Closure

5. Trình bày sự khác nhau giữa local stogare, cookies, session storage ?

6. Xử lý bất đồng bộ ( Cách hoạt động, cú pháp của Promise, Callback, Async await )

7. Khái niệm Hoisting

Di chuyển phần khai báo biến lên đầu

8. Những thay đổi ở ES6

9. Truthy, Falsy

10. Bất đồng bộ và đồng bộ trong Javascript là gì ? Javascript là ngôn ngữ lập trình đồng bộ hay bất đồng bộ ?

11. Tham trị, tham chiếu

ReactJS

1. ReactJS là gì? Tại sao sử dụng ReactJS

2. Trình bày life cycle của ReactJS

3. useEffect có thể dùng trong các giai đoạn nào của life cycle?

4. Virtual DOM

Trong React, mỗi phần giao diện người dùng là một Component. Khi trạng thái của một Component thay đổi, React sẽ cập nhật DOM ảo. Khi DOM ảo đã được cập nhật, React sau đó sẽ so sánh phiên bản hiện tại của DOM ảo với phiên bản trước của DOM ảo. Quá trình này được gọi là "diffing".

Khi React biết đối tượng DOM ảo nào đã thay đổi, thì React chỉ cập nhật các đối tượng đó trong DOM thực. Điều này làm cho hiệu suất tốt hơn nhiều so với thao tác trực tiếp với DOM thực. Do đó làm cho React nổi bật như một thư viện JavaScript hiệu suất cao.

5. Key là gì?

Key sẽ được dùng khi sử dụng hàm map để render một danh sách, key có tác dụng giúp cho React so sánh giữa trạng thái cũ và mới của các thành phần trong danh sách để đưa ra quyết định thành phần nào được re-render.

6. Trình bày một số cách để tối ưu performance

Để tối ưu performance cần tránh những lần re-render không cần thiết, có một số cách để tránh re-render như sau:

• Khi sử dụng useEffect cần Kiểm tra chặt chẽ dependency, sử dụng eventListenner cần phải có clean up.
• Sử dụng useMemo và useCallback để hạn chế khởi tạo những tác vụ phức tạp.
• Sử dụng memo để hạn chế re-render không cần thiết
• Sử dụng key khi render list
• Sử dụng useRef để lưu value trong một vài trường hợp không cần re-render

7. Có thể gán trực tiếp state mà không thông qua hàm setState được không?

Có thể gán trực tiếp state bằng giá trị mới, nhưng component chỉ re-render khi thay đổi state thông qua hàm setState

9. Phân biệt state và props

State: quản lý các trạng thái của component

Props: được dùng để chia sẽ các trạng thái của component này cho các component khác

10. Khi nào component re-render

Khi các state của component thay đổi

Khi component cha re-render

11. Cách ngăn component re-render khi không có sự thay đổi

Sử dụng memo

12. Trình bày cách thức hoạt động của useEffect?

13. Custom hook là gì ?

14. Phân biệt useCallback và useMemo và memo

15. Có nên sử dụng useCallback và useMemo trong mọi trường hợp hay không

16. Tại sao cần state management

17. Phân biệt Context API so với Redux

18. Code splitting

Là kĩ thuật chia nhỏ file js, giúp tăng hiệu suất tải trang bằng cách sử dụng lazy loading. Bạn có thể xem thêm tại https://react.dev/reference/react/lazy

19. React là CSR hay SSR

20. Trình bày một số design pattern trong React

Bạn có thể tham khảo một số pattern phổ biến tại https://reactpatterns.com/