Đây là bài viết được dịch bởi AI.
Chọn ngôn ngữ
Văn bản được tóm tắt bởi AI durumis
- Vấn đề bản đồ không được hiển thị khi tích hợp API bản đồ Kakao vào môi trường React 18 bằng create-react-app là do component React không truy cập trực tiếp vào đối tượng toàn cục.
- React không truy cập trực tiếp vào đối tượng toàn cục vì lý do đóng gói, hiệu suất và quản lý trạng thái, thay vào đó sử dụng các thư viện quản lý trạng thái tập trung như Redux để điều khiển luồng dữ liệu.
- Khác với Vue, React mang lại cảm giác tự do hơn trong cấu trúc thư mục và hook, nhưng nó có thể khó khăn hơn đối với các nhà phát triển mới làm quen. Do đó, việc làm quen với React thông qua các dự án thử nghiệm là một lựa chọn tốt.
- Vấn đề
- Giải pháp
- Lý do
- Cảm nhận
Vấn đề
Trong môi trường React 18, create-react-app khi liên kết với API của Kakao Map, bản đồ không được render!
Tôi đã chèn thẻ script bên trong thẻ head, nên tôi nghĩ rằng nó sẽ được tải trước khi trình duyệt render.
**HTML đã được viết nhưng không hiển thị!!**
~Gần như mã để gọi Kakao Map trong thẻ head của index.html~
<!-- index.html -->
<head>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY%&libraries=services,clusterer,drawing" id="map-lib"></script>useEffect(() => {
// map 불러오기 Tuy nhiên, trong console chỉ xuất hiện kakao is not defined mà thôi và không có gì được render.
Giải pháp
Cơ bản: Thành phần của React không truy cập trực tiếp vào đối tượng toàn cục.
Giải pháp 1-1
Khai báo thuộc tính kakao từ đối tượng toàn cục bên ngoài hàm thành phần.
const { kakao } = window;
function Map() {
//...Giải pháp 1-2
Viết các hàm cần thiết để render Kakao Map thành một hook tùy chỉnh riêng biệt.
//hooks/useKakaoMap.js
const { kakao } = window;
function useKakaoMap() {
const initializeMap = useCallback(() => {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
const newMap = new kakao.maps.Map(container, options);
setMap(newMap);
}, []);
//...
return {
initializeMap
}
}
export default useKakaoMap;
//Map.js
function Map() {
const {
initializeMap,
} = useKakaoMap();
useEffect(() => {
initializeMap();
}, [initializeMap]);
return(
<div id="map"></div>
)
Các sự kiện kéo thả, nhấp chuột, xử lý đánh dấu, v.v. thường được sử dụng cho bản đồ
thay vì triển khai trong thành phần,
tách riêng chúng thành hook tùy chỉnh sẽ tốt hơn về khả năng tái sử dụng và khả năng đọc.
Lý do
Lý do React không truy cập vào đối tượng toàn cục - cần hiểu khái niệm của React.
1) Thuộc tính đóng gói và tính mô-đun
- Mỗi thành phần phải độc lập và có thể tái sử dụng. Nếu nhiều thành phần phụ thuộc vào đối tượng toàn cục, tính độc lập sẽ bị mất và mọi thứ sẽ trở nên cực kỳ phức tạp.
2) Hiệu suất và bảo trì dễ dàng
- React sẽ render lại khi trạng thái thay đổi, nhưng đối tượng toàn cục không phù hợp để theo dõi các thay đổi trạng thái.
3) Quản lý trạng thái tập trung
- Tuy nhiên, nếu bạn muốn chia sẻ nhiều biến, hãy sử dụng các thư viện quản lý trạng thái tập trung như Redux.
Tập trung -> Điều khiển luồng dữ liệu đến thành phần để tránh lỗi và dễ dàng bảo trì.
* Render phía máy chủ
Gần đây, render phía máy chủ được sử dụng nhiều để tối ưu hóa SEO (tối ưu hóa công cụ tìm kiếm), nhưng đối tượng window không thể truy cập từ phía máy chủ!!
Cảm nhận
Đây là những thử nghiệm mà tôi đã trải qua trong dự án React đầu tiên của mình.
Tôi đã làm việc với vue trong hơn 2 năm, nhưng khi bắt đầu dự án React,
tôi đã khá bối rối khi không thể hiển thị Kakao Map...!!!
So với vue, cấu trúc thư mục và hook có vẻ tự do hơn một chút, nên tôi thấy khó hơn.
Tôi đã suy nghĩ rất nhiều về cách viết hiệu quả nhất.
Tôi cần phải thực hành thêm với các dự án thử nghiệm, giống như một món đồ chơi.
* Đây là lần đầu tiên tôi viết blog, durumis khá độc đáo và thú vị.
Họ cũng đưa ra bản tóm tắt 3 dòng mà người Hàn Quốc yêu thích, haha
Có thể tôi cũng có thể gặp gỡ các nhà phát triển nước ngoài?
Tôi muốn trình chỉnh sửa mã được cải thiện một chút.
Chào mừng thảo luận và phê bình!~!
Chúc bạn một ngày vui vẻ!
