Những câu hỏi phỏng vấn ReactJs Front-end Developer thường gặp
Với những Front-end Developer làm việc với Javascript, sự phổ biến và tầm quan trọng của ReactJS không có gì phải bàn cãi. Trong tương lai, yêu cầu tuyển dụng lập trình viên thành thạo ReactJS vẫn sẽ tiếp tục giữ vững vị trí cao trong những thư viện/framework hàng đầu. Tuy nhiên, lo lắng về những câu hỏi phỏng vấn ReactJS vẫn là một vấn đề khó tránh khỏi với những ứng viên có những trải nghiệm ít ỏi.
Vì vậy, hãy xem thật kỹ những câu hỏi thường gặp mà CFD Circle đã liệt kê dưới đây để chuẩn bị cho buổi phỏng vấn Front-end Developer sắp tới của mình nhé!
Lưu ý: Bài viết chỉ mang tính chất tham khảo, đóng góp nhằm cải thiện. Các câu hỏi được liệt kê với xác suất cao nhưng các bạn cũng nên học thêm các kiến thức khác (đặc biệt là thuật toán) để đối phó với các câu hỏi khác nhé.
1. DOM ảo là gì?
DOM ảo (virtual DOM) là một đại diện được nằm trong bộ nhớ cho một thành phần HTML thật mà cấu thành nên giao diện cho chương trình. Khi một component được thông dịch lại (re-render), DOM ảo sẽ so sánh sự thay đổi với mô hình của DOM thật để tạo một danh sách cập nhật sẽ được thực hiện. Lợi ích chính của việc này là giúp tăng hiệu năng, chỉ tập trung vào các thay đổi nhỏ và thực sự cần thiết với DOM thật hơn là phải re-render lại một tập component lớn.
2. Sự khác nhau giữa React class và React hook?
- Trước phiên bản React 16.8 (trước khi giới thiệu hooks), component dựa theo class thường được sử dụng để tạo component, với mục đích để lưu giữ trạng thái bên trong hay tận dụng các phương thức vòng đời
(ví dụ: componentDidMount hay shouldComponentUpdate).
- Function component là cách khác để tạo component nhưng sử dụng các hook để tạo trạng thái và vòng đời của 1 component, function component có nhiều ưu điểm hơn class component và được khuyên dùng.
3. Các ưu điểm của React Hooks?
Có một vài lợi ích khi sử dụng React Hook là:
- Xoá bỏ sự cần thiết của component dựa theo class, các vòng đời và keyword this
- Dễ dàng tái sử dụng logic, bằng cách trừu tượng hoá các chức năng phổ biến thành custom hook.
- Code dễ đọc, dễ test bằng cách chia sẻ logic giữa các component với nhau.
4. Sự khác nhau giữa state và props?
Props là dữ liệu được truyền vào trong một component từ cha của nó. Chúng không nên bị thay đổi, và chỉ dùng để hiển thị hay tính toán các giá trị khác. State là dữ liệu bên trong của một component, nó có thể được thay đổi trong vòng đời của component và được duy trì giữa các lần re-render.
5. Tại sao phải gọi setState thay vì trực tiếp thay đổi state?
Nếu bạn cố gắng thay đổi một state của component trực tiếp, React sẽ không thể biết được khi nào nó cần phải re-render component. Bằng cách sử dụng phương thức setState(), React có thể cập nhật component của UI.
6. Keys được dùng để làm gì?
Khi thực hiên render một tập hợp trong React, việc thêm một key cho mỗi thành phần được lặp lại là cần thiết để giúp React theo dấu mối liên kết giữa các thành phần và dữ liệu. Key nên là một ID duy nhất, lý tưởng nhất nên là một UUID hay một chuỗi duy nhất khác từ tập hợp phần tử, hoặc cũng có thể là index của array.
7. React Context là gì?
Context API được cung cấp bởi React để giải quyết vấn đề chia sẻ state giữa các component trong một ứng dụng. Trước khi context (dịch nôm na là bối cảnh) được giới thiệu, giải pháp duy nhất là sử dụng một thư viện quản lý state, ví dụ như Redux. Tuy nhiên, nhiều nhà phát triển cảm thấy Redux cung cấp nhiều thứ phức tạp không cần thiết, đặc biệt là với ứng dụng nhỏ.
8. Props Drilling là gì? Cách để phòng tránh nó?
- Prop drilling là điều xảy ra khi bạn cần truyền dữ liệu từ một component cha xuống một component thấp hơn trong cây component, drilling - khoan vào các component khác mà các component đấy có thể không cần giá trị props, trong khi chỉ một vài component là cần thôi.
- Thỉnh thoảng vấn đề prop drilling có thể được phòng tránh bằng việc refactor component, tránh việc chia component thành nhỏ hơn và giữ các state chung vào trong component cha chung gần nhất. Với việc bạn cần chia sẻ state giữa các component mà không phụ thuộc vào vị trí xa hay gần trong cây component, bạn có thể sử dụng React Context API hay thư viện quản lý state tập trung ví dụ như Redux.
9. Cách tiếp cận phổ biến để style ứng dụng React?
Có nhiều cách tiếp cần để style React component, mỗi cách đều có ưu và nhược điểm. Đó là:
- Inline styling: rất hữu ích cho việc sửa style, nhưng có nhiều giới hạn (ví dụ: không style được các class giả)
- Class based CSS styles: nhiều tính năng hữu ích hơn inline styling và phù hợp với các nhà phát triển mới.
- CSS in JS styling: có nhiều thư viện cho phép style được định nghĩa như Javascript trong components, và chúng ta thao tác giống như code Javascipt thông thường.
Lộ Trình Học Front-End Từ Căn Bản Đến Nâng Cao
Đăng ký
hoặc
đăng nhập
để bình luận
