Top những câu hỏi phỏng vấn React thường gặp - Phần 5
style="margin-left: 1em; margin-right: 1em;"
>
border="0"
data-original-height="1080"
data-original-width="1920"
height="328"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqtDiSsGdMTO15kQ3rCWEczaoHwOfXBzpqjn1wl1OgzI_R3As7w_7zSVn4fgU_pMjH2tdv8KauGBc31eF2l-j05m18yBbw6XQGaFhw5LMkqY67A2MmMCFxZp6Zck7IKv4Eo4_O4VnJKN6f-WScO6AHpDYuhUBCeMvltmhL105qYu0F_oaa1ob_Ig2gYs/w584-h328/part%205.png"
title="thumbnail"
width="584"
/>
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:
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="393"
data-original-width="1300"
height="186"
src="https://blogger.googleusercontent.com/img/a/AVvXsEhNBNvGgjIzdexw4GeVBZ5-UQ62H9UihF7eBMlTh_uXp0pR1v8Lp3uTHhLdxBEvokhXM79bUTnfXwDHSqXyxSK7z5xrufy4of4wsmTCRSern8zA8M6okyt_u8bRtINlpjCy6Ov9QSo-rMQpYr5S_6SQHD15PwTSjTYjVhHuYjvCZ_I5t-qYLKRYSTPeeKM=w616-h186"
title="flux"
width="616"
/>
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;