ReactJS là một trong những thư viện JavaScript phổ biến nhất hiện nay, được sử dụng rộng rãi trong việc phát triển giao diện người dùng hiện đại và ứng dụng web. Đối với các fresher, việc làm quen với React có thể khá thách thức, đặc biệt là khi đối mặt với các cuộc phỏng vấn kỹ thuật. Để giúp bạn tự tin hơn và chuẩn bị tốt cho những câu hỏi liên quan đến ReactJS, bài viết này sẽ cung cấp cho bạn một loạt các câu hỏi phỏng vấn thường gặp cùng với đáp án chi tiết. Đây là những kiến thức căn bản nhưng quan trọng, giúp bạn thể hiện hiểu biết về ReactJS và gây ấn tượng tốt với nhà tuyển dụng.
1. React là gì?
Đáp án: React là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook. Nó được sử dụng để xây dựng giao diện người dùng (UI) đặc biệt cho các ứng dụng một trang (Single Page Applications - SPA). React cho phép tạo các component độc lập, dễ bảo trì, và tối ưu hiệu năng.
2. JSX là gì?
Đáp án: JSX (JavaScript XML) là một cú pháp mở rộng của JavaScript, cho phép viết HTML trong JavaScript. JSX giúp tạo ra các element React bằng cách kết hợp các thẻ HTML với logic JavaScript, giúp code trở nên dễ đọc và dễ bảo trì hơn.
3. Component trong React là gì? Có mấy loại component?
Đáp án: Component trong React là khối xây dựng nhỏ nhất của giao diện người dùng, có thể tái sử dụng. Các component có thể nhận dữ liệu thông qua props và trả về các phần tử React mô tả UI.
Có 2 loại component chính:
- Function Component: Được viết dưới dạng hàm (function) và không có state riêng (trước đây, nhưng với useState trong React Hooks thì nó cũng có thể có state).
- Class Component: Được viết dưới dạng class và có thể sử dụng state, lifecycle methods (nhưng từ khi có React Hooks, class component ít được sử dụng hơn).
4. State và Props khác nhau như thế nào?
Đáp án:
- State: Là một object chứa dữ liệu nội bộ của component, có thể thay đổi trong suốt vòng đời của component. Khi state thay đổi, React sẽ re-render lại component.
- Props: Là một đối tượng chứa dữ liệu được truyền từ component cha xuống component con. Props là immutable (không thể thay đổi trong component con).
5. React Hook là gì?
Đáp án: React Hook là một tính năng được giới thiệu trong React 16.8, cho phép sử dụng state và các lifecycle methods trong function component. Một số hook phổ biến:
- useState: Quản lý state trong function component.
- useEffect: Thực hiện các side effect như gọi API, cập nhật DOM.
- useContext: Truy cập dữ liệu từ context.
- useRef: Truy cập các phần tử DOM trực tiếp.
6. useState hook hoạt động như thế nào?
Đáp án: useState là một hook cho phép quản lý state trong function component. Nó trả về một mảng với hai giá trị: giá trị hiện tại của state và một hàm để cập nhật state.
const [count, setCount] = useState(0);
// count là giá trị hiện tại, setCount là hàm để thay đổi count.
7. useEffect hook dùng để làm gì?
Đáp án: useEffect được sử dụng để xử lý các side effect như: gọi API, thao tác với DOM, hoặc thực hiện các hoạt động bất đồng bộ. Nó thay thế các lifecycle methods như componentDidMount, componentDidUpdate, và componentWillUnmount trong class component.
useEffect(() => {
// Gọi API hoặc thao tác DOM
}, [dependencies]); // Thực thi khi dependencies thay đổi
8. React Router là gì và tại sao cần sử dụng nó?
Đáp án: React Router là một thư viện dùng để điều hướng giữa các trang trong ứng dụng React. Nó giúp tạo ra các URL động, cho phép người dùng truy cập vào các view khác nhau mà không cần reload lại toàn bộ trang (SPA).
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Router>
);
}
9. Virtual DOM là gì? Tại sao React sử dụng Virtual DOM?
Đáp án: Virtual DOM là một bản sao nhẹ của DOM thật, được lưu trữ trong bộ nhớ. Khi state hoặc props thay đổi, React sẽ cập nhật Virtual DOM trước và so sánh nó với DOM thật (diffing). Sau đó chỉ cập nhật những phần thay đổi trên DOM thật, giúp cải thiện hiệu suất so với việc thao tác trực tiếp với DOM.
10. Lifecycle methods là gì?
Đáp án: Lifecycle methods là các phương thức đặc biệt được gọi trong các giai đoạn khác nhau của vòng đời component. Chúng chỉ áp dụng cho class component. Một số lifecycle methods quan trọng:
- componentDidMount: Gọi khi component đã được render lần đầu.
- componentDidUpdate: Gọi khi component cập nhật.
- componentWillUnmount: Gọi khi component bị unmount (xóa khỏi DOM).
11. Tại sao cần sử dụng key trong React?
Đáp án: Khi render một danh sách các phần tử trong React (ví dụ: trong vòng lặp map), cần cung cấp thuộc tính key để giúp React xác định các phần tử nào đã thay đổi, thêm hoặc xóa. Điều này giúp cải thiện hiệu suất render lại danh sách.
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
12. Context API trong React là gì?
Đáp án: Context API là một công cụ giúp truyền dữ liệu qua nhiều component mà không cần phải truyền props qua từng cấp. Nó hữu ích khi dữ liệu cần chia sẻ giữa nhiều component khác nhau, chẳng hạn như theme, ngôn ngữ, hoặc thông tin người dùng.
const ThemeContext = React.createContext('light');
13. Cách tối ưu hóa hiệu suất trong React?
Đáp án: Một số cách tối ưu hóa hiệu suất trong React bao gồm:
- Sử dụng React.memo để ngăn chặn re-render không cần thiết của các component.
- Sử dụng useCallback và useMemo để tối ưu hóa việc tạo lại hàm và giá trị không cần thiết.
- Tối ưu hóa quá trình cập nhật DOM thông qua Virtual DOM.
- Sử dụng lazy loading cho các component và code-splitting.
14. Sự khác biệt giữa useEffect và useLayoutEffect là gì?
Đáp án:
- useEffect: Chạy sau khi render, không ảnh hưởng đến quá trình vẽ giao diện của trình duyệt. Thường dùng cho các side effect như gọi API, cập nhật state.
- useLayoutEffect: Chạy đồng bộ trước khi trình duyệt vẽ giao diện. Sử dụng khi cần thao tác với DOM ngay sau khi render (ví dụ: đo lường kích thước DOM).
15. HOC (Higher-Order Component) là gì?
Đáp án: HOC là một kỹ thuật nâng cao trong React, là một hàm nhận vào một component và trả về một component mới với khả năng mở rộng thêm tính năng. Nó thường được dùng để chia sẻ logic giữa các component mà không làm thay đổi component gốc.
function withLogging(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Render component');
return <WrappedComponent {...props} />;
};
}
Hy vọng những câu hỏi trên sẽ hữu ích và giúp bạn chuẩn bị tốt cho các cuộc phỏng vấn về ReactJS.
Bình luận