15 Câu Hỏi Phỏng Vấn React Phổ Biến: Chuyên Gia SEO Hướng Dẫn

Hình ảnh minh họa cho bài viết Sự phổ biến của React không còn gì phải bàn cãi, với yêu cầu ngày càng tăng cho các nhà phát triển tại mọi thành phố trên thế...

15 câu hỏi phỏng vấn React phổ biến Hình ảnh minh họa cho bài viết

Sự phổ biến của React không còn gì phải bàn cãi, với yêu cầu ngày càng tăng cho các nhà phát triển tại mọi thành phố trên thế giới. Đối với những nhà phát triển ít kinh nghiệm, việc tập trung kiến thức cho quá trình phỏng vấn thực sự là ác mộng.

Trong bài viết này, chúng ta sẽ cùng đề cập đến 15 câu hỏi phỏng vấn React phổ biến. Đây là những câu hỏi sẽ giúp bạn nắm vững kiến thức cốt lõi và đủ khi làm việc với React. Đồng thời, chúng tôi sẽ tổng hợp các câu trả lời và cung cấp cho bạn một số tài liệu bổ sung để mở rộng hiểu biết hơn.

1. DOM ảo là gì?

Trả lời: DOM ảo (virtual DOM) là một đại diện được lưu trong bộ nhớ cho một thành phần HTML thật, tạo thành giao diện cho chương trình. Khi một thành phần được cập nhật lại (re-render), DOM ảo so sánh sự thay đổi với mô hình của DOM thật để tạo ra 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à tăng hiệu suất, tập trung vào các thay đổi nhỏ và thực sự cần thiết với DOM thật thay vì phải re-render một tập hợp thành phần lớn.

Tham khảo:

2. JSX là gì?

Trả lời: JSX là một phần mở rộng cú pháp JavaScript cho phép viết mã như HTML. Nó sẽ biên dịch thành các lời gọi hàm JavaScript thông thường, cung cấp cách tiếp cận dễ hiểu hơn để tạo các đánh dấu cho thành phần của bạn.

Ví dụ về JSX:

Khi được dịch sang JavaScript, nó sẽ trở thành:

React.createElement('div', { className: 'sidebar' })

Tham khảo:

3. Sự khác nhau giữa class component và functional component?

Trả lời: Trước phiên bản React 16.8 (trước khi giới thiệu hooks), component dựa trên class thường được sử dụng để tạo component, với mục đích lưu trữ trạng thái bên trong hoặc sử dụng các phương thức vòng đời (ví dụ: componentDidMount hoặc shouldComponentUpdate). Một component dựa trên class là một class ES6, mở rộng từ lớp React.Component và ít nhất phải triển khai phương thức render().

Ví dụ về class component:

class Welcome extends React.Component {
  render() {
    return 

Hello, {this.props.name}

; } }

Functional component không có trạng thái (stateless) (được sử dụng trước phiên bản React 16.8) và trả về kết quả mà không cần được render. Chúng phù hợp với việc render giao diện người dùng chỉ phụ thuộc vào props, thông thường chúng đơn giản hơn và nhanh hơn so với component dựa trên class.

Ví dụ về functional component:

function Welcome(props) {
  return 

Hello, {props.name}

; }

Tham khảo:

4. Keys được sử dụng để làm gì?

Trả lời: Khi 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õi 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 là một UUID hoặc một chuỗi duy nhất khác từ tập hợp phần tử, hoặc cũng có thể là chỉ mục của mảng.

Ví dụ:

    {todos.map((todo) =>
  • {todo.text}
  • )}

Việc không sử dụng key có thể dẫn đến những thay đổi lạ khi thêm và xóa các phần tử từ tập hợp.

Tham khảo:

5. Sự khác nhau giữa state và props?

Trả lời: Props là dữ liệu được truyền vào một component từ cha của nó. Chúng không nên bị thay đổi và chỉ được sử dụng để hiển thị hoặc tính toán các giá trị khác. State là dữ liệu bên trong 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.

Tham khảo:

6. Tại sao phải gọi setState thay vì trực tiếp thay đổi state?

Trả lời: 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 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 giao diện người dùng của component.

Nếu bạn cần cập nhật một state dựa trên dữ liệu của state khác hoặc props khác, chỉ cần truyền một hàm vào setState(), trong đó bạn truyền state và props như hai tham số của hàm:

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

Tham khảo:

7. Làm thế nào để bạn giới hạn kiểu giá trị cho props được truyền vào hoặc làm nó luôn cần required?

Trả lời: Để kiểm tra kiểu dữ liệu cho một props của component, bạn có thể sử dụng thư viện prop-types để chỉ rõ kiểu dữ liệu mong muốn và yêu cầu prop là bắt buộc hoặc không:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      

Hello, {this.props.name}

); } } Greeting.propTypes = { name: PropTypes.string.isRequired };

Tham khảo:

8. Props drilling là gì? Làm thế nào để phòng tránh nó?

Trả lời: Prop drilling xảy ra khi bạn cần truyền dữ liệu từ một component cha xuống một component con sâu hơn trong cây component, khám phá các component không cần giá trị props. Thỉnh thoảng, vấn đề prop drilling có thể được tránh bằng cách refactor component, tránh việc chia component thành nhỏ hơn và giữ các state chung trong component cha gần nhất. Đối với việc 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 hoặc thư viện quản lý state tập trung như Redux.

Tham khảo:

9. React context là gì?

Trả lời: React 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 được giới thiệu, Redux là giải pháp duy nhất để quản lý state. Tuy nhiên, nhiều nhà phát triển cho rằng Redux cung cấp nhiều thứ phức tạp không cần thiết, đặc biệt là đối với ứng dụng nhỏ.

Tham khảo:

10. Redux là gì?

Trả lời: Redux là một thư viện quản lý state bên thứ ba cho React, được tạo ra trước khi Context API xuất hiện. Redux dựa trên khái niệm một kho chứa state, hay gọi là store, và các component có thể nhận dữ liệu từ store thông qua props. Cách duy nhất để cập nhật store là dispatch một hành động đến store, và điều này được thực hiện thông qua reducer. Reducer nhận hành động và trạng thái hiện tại và trả về một trạng thái mới, đồng thời kích hoạt re-render lại các component đã đăng ký.

Tham khảo:

11. Cách tiếp cận phổ biến để style ứng dụng React là gì?

Trả lời: Có nhiều cách tiếp cận để style React component, mỗi cách tiếp cận có ưu điểm và nhược điểm riêng. Các cách tiếp cận phổ biến bao gồm:

  • Inline styling: hữu ích cho việc chỉnh sửa style, nhưng có một số giới hạn (ví dụ: không thể áp dụng các class giả).
  • Class-based CSS styles: cung cấp 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 định nghĩa style như là JavaScript trong các component, và bạn có thể thao tác giống như viết mã JavaScript thông thường.

Tham khảo:

12. Sự khác nhau giữa controlled và uncontrolled component?

Trả lời: Trong một tài liệu HTML, có rất nhiều thành phần quản lý trạng thái của chính nó. Một uncontrolled component coi DOM là nguồn state của input của nó. Một controlled component, sử dụng state bên trong, thường được sử dụng để theo dõi giá trị của thành phần. Khi giá trị của input thay đổi, React sẽ re-render input.

Uncontrolled components có thể hữu ích khi tích hợp với mã không phải là React.

Tham khảo:

13. Các phương thức vòng đời là gì?

Trả lời: Các component dựa trên class có thể sử dụng các phương thức đặc biệt, được gọi tại các thời điểm cụ thể trong vòng đời của chúng, ví dụ như sau khi được mount (render vào DOM) và trước khi bị unmount. Những thời điểm này rất hữu ích để cài đặt và cung cấp các thông tin cho một component có thể cần, cài đặt bộ đo thời gian hoặc gắn các sự kiện trình duyệt.

Các phương thức vòng đời phổ biến bao gồm:

  • componentWillMount: được gọi sau khi component được tạo, nhưng trước khi nó được render vào DOM.
  • componentDidMount: được gọi sau khi component đã render lần đầu tiên, thành phần DOM đã sẵn sàng sử dụng.
  • componentWillReceiveProps: được gọi khi một prop mới được nhận.
  • shouldComponentUpdate: khi một prop mới được nhận, phương thức này có thể chặn quá trình re-render để tối ưu hiệu suất.
  • componentWillUpdate: được gọi khi prop mới được nhận và shouldComponentUpdate trả về true.
  • componentDidUpdate: được gọi sau khi component đã cập nhật.
  • componentWillUnmount: được gọi trước khi component bị xoá khỏi DOM, cho phép bạn xoá mọi thứ như các bộ lắng nghe sự kiện.

Tham khảo:

14. React hook là gì?

Trả lời: Hook là nỗ lực của React để mang sự tiện ích của component dựa trên class qua component dựa trên function (bao gồm cả state nội tại và các phương thức vòng đời).

Tham khảo:

15. Các ưu điểm của React hooks là gì?

Trả lời: Sử dụng React hooks có một số lợi ích, bao gồm:

  • Loại bỏ cần thiết của component dựa trên class, các phương thức vòng đời và cần thiết keyword this.
  • Dễ dàng tái sử dụng logic bằng cách trừu tượng hóa các chức năng phổ biến thành hook tùy chỉnh.
  • Code dễ đọc, dễ kiểm tra bằng cách chia sẻ logic giữa các component.

Tham khảo:

Tổng kết

Mặc dù không tập trung vào chi tiết, những câu hỏi trên đã khá đa dạng và bao gồm nhiều phạm vi kiến thức về React. Hiểu rõ những chủ đề này sẽ giúp bạn có kiến thức tốt hơn về thư viện này và các thay đổi gần đây. Bên cạnh đó, các bài viết tham khảo cũng sẽ giúp bạn hiểu sâu hơn về từng chủ đề cụ thể này.

1