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

byHiju Blog -
0


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






Tags

Hiju Blog

I'm HiJu

You may like these posts

Post a Comment

Previous Post Next Post