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

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

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

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

1. React Router là gì?

React Router là một thư viện định tuyến mạnh mẽ được xây dựng dựa trên React, giúp bạn thêm các màn hình mới và chuyển đến ứng dụng của bạn cực kỳ nhanh chóng, trong khi vẫn giữ cho URL đồng bộ với những gì đang được hiển thị trên trang.

2. React Router khác với thư viện history như thế nào?

React Router là một wrapper around thư viện history xử lý tương tác với window.history của trình duyệt với hash histories và trình duyệt của nó. Nó cũng cung cấp memory history hữu ích cho các môi trường không có global history, chẳng hạn như phát triển ứng dụng di động (React Native) và thử nghiệm đơn vị với Node.

3. Các thành phần <Router> của React Router v4 là gì?

React Router v4 cung cấp 3 component <Router> bên dưới:
  • <BrowserRouter>
  • <HashRouter>
  • <MemoryRouter>

Các component trên sẽ tạo các phiên bản history trình duyệt, hash và bộ nhớ. React Router v4 làm cho các thuộc tính và phương thức của phiên bản history được liên kết với bộ router của bạn có sẵn thông qua ngữ cảnh trong đối tượng bộ router.

4. Làm cách nào để nhận query parameters trong React Router?

Đọc Chuỗi truy vấn, còn được gọi là Tham số tìm kiếm, từ URL là một phương pháp phổ biến trong phát triển ứng dụng web và bạn sẽ học cách đọc chúng bằng React Router. React Router v6 cung cấp hook useSearchParams() mà chúng ta có thể sử dụng để đọc các tham số tìm kiếm chuỗi truy vấn mà chúng ta cần từ URL.

Đọc Query Strings, còn được gọi là Search Params, từ URL là một phương pháp phổ biến trong phát triển ứng dụng web và bạn sẽ học cách đọc chúng bằng React Router. React Router v6 cung cấp hook useSearchParams() mà chúng ta có thể sử dụng để đọc các tham số tìm kiếm chuỗi truy vấn mà chúng ta cần từ URL.

Chúng tôi có thể đọc một single query parameter hoặc đọc tất cả chúng cùng một lúc và chúng tôi cũng sẽ điều tra một số tùy chọn khác.

Tôi sẽ hướng dẫn bạn một số thực tiễn và khái niệm khác nhau mà bạn sẽ cần để xử lý việc đọc search params từ URL, bao gồm việc đọc một lần duy nhất cũng như theo dõi bất kỳ thay đổi thông số nào thông qua useEffect() React hook.

5. Làm cách nào để triển khai mặc định hoặc trang NotFound?

<Switch> renders the first child <Route> phù hợp. <Route> không có đường dẫn nào luôn khớp. Vì vậy, bạn chỉ cần thả thuộc tính đường dẫn như bên dưới:

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/user" component={User} />
  <Route component={NotFound} />
</Switch>

6. Làm cách nào để thực hiện chuyến hướng tự động sau khi đăng nhập?

react-router package cung cấp thành phần <Redirect> trong React Router. Rendering một <Redirect> sẽ điều hướng đến một vị trí mới. Giống như chuyển hướng phía máy chủ, vị trí mới sẽ ghi đè vị trí hiện tại trong history stack.

7. Flux là gì?

Flux là một mô hình thiết kế ứng dụng được sử dụng để thay thế cho mẫu MVC truyền thống hơn. Nó không phải là một framework hay thư viện mà là một kiểu kiến ​​trúc mới bổ sung cho React và khái niệm Luồng dữ liệu một chiều. Facebook sử dụng mẫu này trong nội bộ khi làm việc với React.

Quy trình làm việc giữa các dispatcher, stores và views components với các đầu vào và đầu ra riêng biệt như sau:

flux

8. Redux là gì?

Redux là một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript dựa trên mẫu thiết kế Flux. Redux có thể được sử dụng cùng với React hoặc với bất kỳ view library nào khác. Nó rất nhỏ (khoảng 2kB) và không có phụ thuộc.

9. Các nguyên tắc cốt lõi của Redux là gì?

Redux tuân theo ba nguyên tắc cơ bản:
  • Single source of truth: Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong một object tree trong một single store. Single state tree giúp theo dõi các thay đổi theo thời gian và gỡ lỗi hoặc kiểm tra ứng dụng dễ dàng hơn.
  • State is read-only: Cách duy nhất để thay đổi trạng thái là phát ra một hành động, một đối tượng mô tả những gì đã xảy ra. Điều này đảm bảo rằng cả chế độ xem và the network callbacks sẽ không bao giờ ghi trực tiếp vào trạng thái.
  • Changes are made with pure functions: Để chỉ định cách state tree được chuyển đổi bằng các hành động, bạn viết các reducers. Reducers chỉ là các hàm thuần túy lấy trạng thái trước đó và một action làm tham số và trả về trạng thái tiếp theo.

10. Nhược điểm của Redux so với Flux là gì?

Thay vì nói về nhược điểm, chúng ta có thể nói rằng có rất ít sự thỏa hiệp khi sử dụng Redux so với Flux. Đó là như sau:
  • Bạn sẽ cần học cách tránh các đột biến: Flux không quan tâm đến việc thay đổi dữ liệu, nhưng Redux không thích các đột biến và nhiều gói bổ sung cho Redux cho rằng bạn không bao giờ thay đổi trạng thái. Bạn có thể thực thi điều này bằng các packages chỉ dành cho nhà phát triển như redux-immutable-state-invariant, Immutable.js hoặc hướng dẫn nhóm của bạn viết code không đột biến.
  • Bạn sẽ phải cẩn thận chọn các packages của mình: Mặc dù Flux rõ ràng không cố gắng giải quyết các vấn đề như undo/redo, persistence, or forms, Redux có các điểm mở rộng như as middleware and store enhancers, và nó đã tạo ra một sự phong phú hệ sinh thái.
  • Chưa có tích hợp Flow tốt: Flux hiện cho phép bạn thực hiện kiểm tra kiểu tĩnh rất ấn tượng mà Redux chưa hỗ trợ.

11. Bạn có thể gửi một action trong reducer không?

Dispatching an action trong một reducer là một anti-pattern. Reducer của bạn sẽ không có tác dụng phụ, chỉ cần tiêu hóa action payload và trả về một đối tượng trạng thái mới. Việc thêm người nghe và dispatching actions trong reducer có thể dẫn đến các hành động bị xiềng xích và các tác dụng phụ khác.

12. Làm cách nào để truy cập store Redux bên ngoài một component?

Bạn chỉ cần xuất store từ mô-đun nơi nó được tạo bằng createStore(). Ngoài ra, nó không nên gây pollute global window object.

store = createStore(myReducer);

export default store;

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