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

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.

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.

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.

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

Sau React 16.3

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é.

Các bài viết liên quan:

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

1. Inline conditional expressions là gì?

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

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

4. Virtual DOM là gì?

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

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

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

8. Higher-Order Components là gì?

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

10. Fragments là gì?

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

12. Stateless components là gì?

Kết luận

Post a Comment

Angular CRUD Example with Local Storage - Account component - Cấu hình route - #13

Categories

Main Tags

Latest Posts

Popular Posts

Angular CRUD Example with Local Storage - Account component - Cấu hình route - #13

Cách tạo mẫu bài đăng cho trang web Blogger

Cách cải thiện vị trí website trên Google Search

Contact Form