Top những câu hỏi phỏng vấn React thường gặp - Phần 2

Top những câu hỏi phỏng vấn React thường gặp - Phần 2

thumbnail

Tiếp tục về chủ đề Top những câu hỏi phỏng vấn React thường gặp, mình sẽ cập nhật thêm các câu hỏi ở phần 2 này. Nếu bạn chưa xem phần 1 thì có thể nhấn vào đây.

Còn bây giờ thì tiếp tục nào!

1. Inline conditional expressions là gì?

Bạn có thể sử dụng câu lệnh if hoặc toán tử 3 ngôi có sẵn để kết xuất một biểu thức có điều kiện. Ngoại những các tiếp cận này, bạn cũng có thể nhúng bất kỳ biểu thức nào vào JSX bằng cách gói chúng trong dấu ngoặc nhọn và sau đó là toán tử logic && trong JS.

Ví dụ:

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

2. "key" prop là gì và lợi ích khi sử dụng nó trong arrays của các elements?

"key" là một thuộc tính đặc biệt mà bạn nên đưa vào khi tạo mảng các phần tử. "key" props giúp React xác định những mục nào đã thay đổi, được thêm vào hoặc bị xóa.

Keys phải là duy nhất giữa các anh chị em của nó. Thông thường, chúng tôi sử dụng ID từ dữ liệu của mình để làm "key".

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

Khi bạn không có ID ổn định cho các mục được render, bạn có thể sử dụng index để làm key như là một phương pháp cuối cùng:

const todoItems = todos.map((todo, index) => (
  <li key={index}>{todo.text}</li>
));

Lưu ý:
  • Không nên sử dụng index cho các keys nếu thứ tự của các mục có thể thay đổi. Điều này có thể tác động tiêu cực đến hiệu suất và có thể gây ra sự cố với state component.
  • Nếu bạn extract list item dưới dạng component riêng biệt thì hãy áp dụng các key trên list component thay vì thẻ li.
  • Sẽ có một thông báo cảnh báo trong console kếu key prop không có trong các list items.
  • Thuộc tính key chấp nhận cuỗi hoặc số và chuyển đổi nội bộ nó thành kiễu chuỗi.

3. Việc sử dụng các refs là gì?

Refs được sử dụng để trả về một tham chiếu đến element. Chúng nên tránh trong hầu hết các trường hợp, tuy nhiên, chúng có thể hữu ích khi bạn cần truy cập trực tiếp vào DOM element howacj một phiên bản của một component.

4. Virtual DOM là gì?

Virtual DOM (VDOM) là một đại diện trong bộ nhớ của Real DOM. Biểu diễn của giao diện người dùng được lưu trong bộ nhớ và được đồng bộ hóa với DOM "thực". Đó là một bước xảy ra giữa chức năng kết xuất được gọi và hiển thị các phần tử trên màn hình. Toàn bộ quá trình này được gọi là reconciliation.

5. Cách Virtual DOM hoạt động?

Virtual DOM hoạt động theo ba bước đơn giản.

  • Bất cứ khi nào bất kỳ dữ liệu cơ bản nào thay đổi, toàn bộ giao diện người dùng sẽ được hiển thị lại trong biểu diễn Virtual DOM.

virtual dom 1

  • Sau đó, sự khác biệt giữa biểu diễn DOM trước đó và biểu diễn DOM mới được tính toán.

virtual dom 2


  • Sau khi tính toán xong, DOM thực sẽ được cập nhật chỉ với những thứ đã thực sự thay đổi.

virtual dom 3


6. Sự khác biệt giữa Shadow DOM và Virtual DOM là gì?

Shadow DOM là một công nghệ trình duyệt được thiết kế chủ yếu để xác định phạm vi các biến và CSS trong các thành phần web. Virtual DOM là một khái niệm được triển khai bởi các thư viện trong JavaScript trên các API của trình duyệt.

7. Các giai đoạn khác nhau của lifecycle of component là gì?

Lifecycle component có ba giai đoạn vòng đời riêng biệt:

Mounting: component đã sẵn sàng để mount trong DOM của trình duyệt. Giai đoạn này bao gồm quá trình khởi tạo từ các phương thức vòng đời của constructor(), getDerivedStateFromProps(), render() và componentDidMount().

Updating: Trong giai đoạn này, component được cập nhật theo hai cách, gửi các props mới và cập nhật state từ setState() hoặc forceUpdate(). Giai đoạn này bao gồm các phương pháp vòng đời getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshot BeforeUpdate() và componentDidUpdate().

Unmounting: Trong giai đoạn cuối cùng này, component không cần thiết và được ngắt kết nối khỏi DOM của trình duyệt. Giai đoạn này bao gồm phương thức vòng đời componentWillUnmount().

Điều đáng nói là bên trong React có khái niệm về các giai đoạn khi áp dụng các thay đổi cho DOM. Chúng được tách ra như sau:

Render component sẽ render mà không có bất kỳ tác dụng phụ nào. Điều này áp dụng cho các Pure component và trong giai đoạn này, React có thể tạm dừng, hủy bỏ hoặc khởi động lại quá trình render.

Pre-commit Trước khi component thực sự áp dụng các thay đổi cho DOM, có một thời điểm cho phép React đọc từ DOM thông qua getSnapshot BeforeUpdate().

Commit React hoạt động với DOM và thực hiện các vòng đời cuối cùng tương ứng là componentDidMount() để mount, componentDidUpdate() để cập nhật và componentWillUnmount() để ngắt kết nối.

React 16.3+ Phases

lifecycle 1

Sau React 16.3

lifecycle 2

8. Higher-Order Components là gì?

Higher-order component (HOC) là một function lấy một component và trả về một component mới. Về cơ bản, đó là một khuôn mẫu bắt nguồn từ bản chất cấu thành của React.

Chúng tôi gọi chúng là các pure component vì chúng có thể chấp nhận bất kỳ component con nào được cung cấp động nhưng chúng sẽ không sửa đổi hoặc sao chép bất kỳ hành vi nào từ các component đầu vào của chúng.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC có thể được sử dụng cho nhiều trường hợp:
  • Tái sử dụng code, logic và trừu tượng hóa bootstrap.
  • Render hijacking.
  • Trừu tượng hóa và thao tác state.
  • Thao tác props.

9. Tại sao React sử dụng thuộc tính className thay vì class?

Trên trang web chính thức của React, điều này được giải thích là do JSX là JavaScript nên các định danh như class và for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như className và htmlFor.

10. Fragments là gì?

Chúng ta có thể hiểu nó là 1 parttern chung trong React dùng cho component để trả về nhiều elements mà không cần tạo thêm các nodes vào DOM.

Các Fragments được sử dụng để thay thế thẻ JSX "parent" khi chúng ta không muốn nó. Ở dưới đây, các bạn có thể thấy ví dụ đơn giản nhất về sử dụng Fragments. Trong ví dụ này, chúng ta có 3 thẻ divs trong component, và chúng ta chỉ muốn 3 thẻ divs được hiển thị khi user render đến component này:

class ThreeDivsFragments extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
      </React.Fragment>
    );
  }
}

Cũng có thể hiển thị danh sách các fragments bên trong vòng lặp với thuộc tính key bắt buộc được cung cấp.

function StoryBook() {
  return stories.map(story =>
    <Fragment key={ story.id}>
      <h2>{story.title}</h2>
      <p>{story.description}</p>
      <p>{story.date}</p>
    </Fragment>
    );
}

Thông thường bạn không cần sử dụng đến khi không cần thuộc tính key. Việc sử dụng cú pháp ngắn hơn trông giống như bên dưới.

function Story({title, description, date}) {
  return (
      <>
        <h2>{title}</h2>
        <p>{description}</p>
        <p>{date}</p>
      </>
    );
}

11. Tạo sao fragments tốt hơn container div?

Dưới đây là danh sách các lý do để thích fragments hơn các container DOM element,
  • Các fragments nhanh hơn một chút và sử dụng ít bộ nhớ hơn bằng cách không tạo thêm một  DOM node. Điều này chỉ có lợi ích thực sự trên những cây rất lớn và sâu.
  • Một số cơ chế CSS như Flexbox và CSS Grid có mối quan hệ cha-con đặc biệt và việc thêm các div ở giữa sẽ khiến bạn khó giữ được bố cục mong muốn.
  • DOM Inspector ít lộn xộn hơn.

12. Stateless components là gì?

Nếu hành vi của một component độc lập với state của nó thì nó có thể là một stateless component. Bạn có thể sử dụng một hàm hoặc một lớp để tạo các stateless component. Nhưng trừ khi bạn cần sử dụng lifecycle hook trong các component của mình, bạn nên sử dụng các function components. Có rất nhiều lợi ích nếu bạn quyết định sử dụng các function components ở đây; chúng dễ viết, dễ hiểu và dễ kiểm tra, nhanh hơn một chút và bạn có thể tránh hoàn toàn từ khóa this.

Kết luận

Vậy là mình đã tổng hợp thêm một số câu hỏi thường gặp khi phỏng vấn React ở phần 2 này. Mình sẽ tiếp tục thu thập nhiều hơn các câu hỏi và chia sẽ đến với mọi người. Các bạn hãy theo dõi Trang để không bỏ lỡ các bài viết tiếp theo nhé. 

No comments:

Powered by Blogger.