Это сообщение переведено AI.
Выбрать язык
Текст, резюмированный ИИ durumis
- Проблема, возникающая при интеграции API карт Kakao в среде React 18, create-react-app, когда карта не отображается, связана с тем, что компоненты React не обращаются к глобальным объектам напрямую.
- React не обращается к глобальным объектам напрямую из-за таких принципов, как инкапсуляция, производительность и управление состоянием, а также для управления потоком данных использует центральные библиотеки управления состоянием, такие как Redux.
- В отличие от Vue, React обеспечивает большую свободу в структуре папок, хуках и т. д., но это может затруднить освоение разработчикам, только начинающим работу с React. Рекомендуется освоиться с React, работая над небольшими проектами.
- Проблема
- Решение
- Причина
- Впечатления
Проблема
При подключении API карт Kakao в среде React 18, create-react-app карта не отображалась!
Я вставил тег script в тег head, поэтому я думал, что он будет загружен до рендеринга браузером.
** Я написал html-код, но он не отображается!!
~Примерно код вызова карт Kakao в теге head 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(() => {
// загрузка карты Но в консоли отображалось только kakao is not defined и ничего не рендерилось.
Решение
Основа: компоненты React не имеют прямого доступа к глобальным объектам.
Решение 1-1
За пределами функции компонента объявить атрибут kakao из глобального объекта.
const { kakao } = window;
function Map() {
//...Решение 1-2
Создать отдельный кастомный хук для функций, необходимых для рендеринга карт Kakao.
//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>
)
События перетаскивания, клика, обработки маркеров и другие функции, обычно необходимые для карты,
лучше реализовывать не в компоненте,
а разделять их на кастомные хуки с точки зрения повторного использования и удобочитаемости.
Причина
Почему в React не обращаются к глобальным объектам? - Нужно понять концепцию React.
1) Инкапсуляция и модульность
- Каждый компонент должен быть независимым и повторно используемым. Если во многих компонентах будет зависимость от глобальных объектов, это приведет к потере независимости и сильно усложнит работу.
2) Производительность и простое сопровождение
- React повторно рендерит компонент при изменении состояния, а глобальные объекты не подходят для отслеживания изменений состояния.
3) Управление состоянием централизовано
- Если все же нужно разделять несколько переменных, используют библиотеки централизованного управления состоянием, такие как Redux.
Централизованное управление -> управление потоком данных из центра в компоненты, чтобы избежать ошибок и упростить сопровождение.
* Серверный рендеринг
В последнее время для SEO (оптимизации выдачи в поисковых системах) часто используется серверный рендеринг, а к объекту window на сервере получить доступ нельзя!!
Впечатления
Это было моим первым опытом работы с React.
Я более 2 лет работал с vue, но когда я начал проект React,
я был очень удивлен, что не смог отобразить карту Kakao...!!!
React кажется более свободным, чем vue, с точки зрения структуры папок или хуков, что делает его более сложным.
Я много думал о том, как сделать это эффективно.
Я должен продолжать изучать его, играя с ним, как с игрушкой.
* Это мой первый блог, но durumis очень необычный и интересный.
Он также делает 3-строчную сводку, которую любят корейцы, ха-ха.
Может быть, я смогу встретить зарубежных разработчиков?
Редактор кода было бы неплохо немного улучшить.
Буду рад обменяться идеями, приветствуются критические замечания~!
Желаю вам прекрасного дня!
