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

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

thumbnail

Tiếp tục chuỗi bài viết về Top những câu hỏi phỏng vấn React thường gặp, đây sẽ là phần 6. 

Bây giờ hãy bắt đầu nào!

1. Những hạn chế của MVW pattern là gì?

  • Thao tác DOM rất tốn kém, điều này khiến các ứng dụng hoạt động chậm và không hiệu quả.
  • Do sự phụ thuộc vòng tròn, một mô hình phức tạp đã được tạo xung quanh các models and views.
  • Rất nhiều thay đổi dữ liệu xảy ra đối với các ứng dụng cộng tác (như Google Tài liệu).
  • Không có cách nào để hoàn tác (du hành ngược thời gian) một cách dễ dàng mà không cần thêm quá nhiều code bổ sung.

2. Có điểm tương đồng nào giữa Redux và RxJS không?

Những thư viện này rất khác nhau cho những mục đích rất khác nhau, nhưng có một số điểm tương đồng mơ hồ.

Redux là một công cụ để quản lý trạng thái trong toàn bộ ứng dụng. Nó thường được sử dụng làm kiến ​​trúc cho giao diện người dùng. Hãy nghĩ về nó như một giải pháp thay thế cho (một nửa) Angular. RxJS là một reactive programming library. Nó thường được sử dụng như một công cụ để thực hiện các tác vụ không đồng bộ trong JavaScript. Hãy nghĩ về nó như một giải pháp thay thế cho Promises. Redux sử dụng mô hình Reactive vì Store is reactive. Store theo dõi các actions từ xa và tự thay đổi. RxJS cũng sử dụng mô hình Reactive, nhưng thay vì là một kiến ​​trúc, nó cung cấp cho bạn các khối xây dựng cơ bản, Observables, để thực hiện mô hình này.

3. Làm thế nào để reset state trong Redux?

Bạn cần viết một root reducer trong ứng dụng của mình để ủy quyền xử lý action cho bộ rút gọn được tạo bởi combReducers().

Ví dụ: chúng ta hãy lấy rootReducer() để trả về trạng thái ban đầu sau action USER_LOGOUT. Như chúng ta đã biết, reducers được cho là trả về trạng thái ban đầu khi chúng được gọi với đối số đầu tiên là undefined, bất kể hành động là gì.

const appReducer = combineReducers({
  /* your app's top-level reducers */
});

const rootReducer = (state, action) => {
  if (action.type === "USER_LOGOUT") {
    state = undefined;
  }

  return appReducer(state, action);
};

Trong trường hợp sử dụng redux-persist, bạn cũng có thể cần dọn dẹp bộ nhớ của mình. redux-persist giữ một bản sao trạng thái của bạn trong một storage engine. Trước tiên, bạn cần nhập công cụ lưu trữ thích hợp, sau đó phân tích cú pháp trạng thái trước khi đặt thành không xác định và xóa từng khóa trạng thái lưu trữ.

const appReducer = combineReducers({
  /* your app's top-level reducers */
});

const rootReducer = (state, action) => {
  if (action.type === "USER_LOGOUT") {
    Object.keys(state).forEach((key) => {
      storage.removeItem(`persist:${key}`);
    });

    state = undefined;
  }

  return appReducer(state, action);
};

4. Sự khác nhau giữa React context và React Redux?

Bạn có thể sử dụng Context trực tiếp trong ứng dụng của mình và sẽ rất tuyệt khi truyền dữ liệu xuống các nested components mà nó được thiết kế cho.

Trong khi Redux mạnh hơn nhiều và cung cấp một số lượng lớn các tính năng mà Context API không cung cấp. Ngoài ra, React Redux sử dụng ngữ cảnh bên trong nhưng nó không hiển thị thực tế này trong API công khai.

5. Tại sao các Redux state function được gọi là reducers?

Reducers luôn trả về sự tích lũy của trạng thái (dựa trên tất cả các hành động trước đó và hiện tại). Do đó, chúng hoạt động như một reducer of state. Mỗi khi reducer of state được gọi, state và action được truyền dưới dạng tham số. Trạng thái này sau đó được giảm (hoặc tích lũy) dựa trên hành động và sau đó trạng thái tiếp theo được trả về. Bạn có thể reduce một tập hợp các hành động và trạng thái ban đầu (of the store) để thực hiện các hành động này để có được trạng thái cuối cùng.

6. Bạn có nên giữ tất cả component's state trong Redux store hay không?

Giữ dữ liệu của bạn trong Redux store, và trạng thái liên quan đến giao diện người dùng bên trong component.

7. Sự khác nhau giữa component và container trong React Redux là gì?

Component là một class or function component mô tả phần trình bày của ứng dụng của bạn.

Container là một thuật ngữ không chính thức cho một component được kết nối với Redux store. Containers subscribe cập nhật trạng thái Redux và gửi các hành động và chúng thường không hiển thị các phần tử DOM; họ ủy quyền kết xuất cho các component con trình bày.

8. Mục đích của các constants trong Redux?

Các hằng số cho phép bạn dễ dàng tìm thấy tất cả các cách sử dụng chức năng cụ thể đó trong dự án khi bạn sử dụng IDE. Nó cũng ngăn bạn đưa ra các lỗi ngớ ngẩn do lỗi đánh máy – trong trường hợp đó, bạn sẽ nhận được ReferenceError ngay lập tức.

Thông thường, chúng tôi sẽ lưu chúng trong một tệp duy nhất (constants.js hoặc actionTypes.js).

export const ADD_TODO = "ADD_TODO";
export const DELETE_TODO = "DELETE_TODO";
export const EDIT_TODO = "EDIT_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
export const COMPLETE_ALL = "COMPLETE_ALL";
export const CLEAR_COMPLETED = "CLEAR_COMPLETED";

9. Làm cách nào để cấu trúc các thư mục cấp cao nhất của Redux?

Hầu hết các ứng dụng có một số thư mục cấp cao nhất như sau:
  • Components: Được sử dụng cho dumb components không biết về Redux.
  • Containers: Được sử dụng cho các smart components được kết nối với Redux.
  • Actions: Được sử dụng cho tất cả action creators, trong đó tên tệp tương ứng với một phần của ứng dụng.
  • Reducers: Được sử dụng cho tất cả các reducers, trong đó tên tệp tương ứng với state key.
  • Store: Được sử dụng để store initialization.

Cấu trúc này hoạt động tốt cho các ứng dụng vừa và nhỏ.

10. redux-saga là gì?

edux-saga là một thư viện nhằm mục đích tạo ra các hiệu ứng phụ (những thứ không đồng bộ như tìm nạp dữ liệu và những thứ không trong sạch như truy cập bộ đệm của trình duyệt) trong các ứng dụng React/Redux dễ dàng hơn và tốt hơn.

Nó có sẵn trong NPM:

$ npm install --save redux-saga

11. Mô hình mental của redux-saga là gì?

Saga giống như một luồng riêng biệt trong ứng dụng của bạn, nó hoàn toàn chịu trách nhiệm về các tác dụng phụ. redux-saga là một redux middleware, có nghĩa là luồng này có thể được bắt đầu, tạm dừng và hủy bỏ khỏi ứng dụng chính với các Redux actions thông thường, nó có quyền truy cập vào trạng thái đầy đủ của ứng dụng Redux và nó cũng có thể gửi các hành động Redux.

12. Sự khác nhau giữa call() và put() trong redux-saga là gì?

Cả call() và put() đều là các hàm tạo hiệu ứng. call() được sử dụng để tạo mô tả hiệu ứng, hướng dẫn middleware to call the promise. put() tạo một hiệu ứng, hướng dẫn middleware to dispatch an action to the store.

Hãy lấy ví dụ về cách các hiệu ứng này hoạt động để tìm nạp dữ liệu người dùng cụ thể.

function* fetchUserSaga(action) {
  // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
  // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
  const userData = yield call(api.fetchUser, action.userId);

  // Instructing middleware to dispatch corresponding action.
  yield put({
    type: "FETCH_USER_SUCCESS",
    userData,
  });
}

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