Esta é uma postagem traduzida por IA.
Selecionar idioma
Texto resumido pela IA durumis
- O problema de renderização do mapa ao integrar a API do Kakao Maps em um ambiente React 18, create-react-app, ocorre porque os componentes React não acessam diretamente objetos globais.
- React não acessa diretamente objetos globais para encapsulamento, desempenho e gerenciamento de estado, e usa bibliotecas de gerenciamento de estado central como Redux para controlar o fluxo de dados.
- Ao contrário do Vue, React oferece uma sensação de liberdade na estrutura de pastas, hooks, etc., mas pode ser difícil para desenvolvedores iniciantes, e a familiarização com projetos de brinquedo é recomendável.
- Problema
- Solução
- Motivo
- Pensamentos
Problema
Durante a integração da API do Kakao Map em um ambiente React 18, create-react-app, o mapa não estava sendo renderizado!
Incorporamos uma tag de script dentro da tag head, então pensamos que seria carregado antes que o navegador o renderizasse.
** O html foi escrito, mas não está aparecendo!!
~Escrevi o código para carregar o mapa do Kakao no 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(() => {
// carregar o mapa No entanto, o console apenas registrou kakao não definidoe nada foi renderizado.
Solução
Básico: componentes React não acessam objetos globais diretamente.
Solução 1-1
Declare o atributo kakao de um objeto global fora da função do componente.
const { kakao } = window;
function Map() {
//...Solução 1-2
Crie ganchos personalizados para funções necessárias para renderizar o mapa do 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>
)
Eventos de arrastar, eventos de clique, manuseio de marcadores, etc.
é melhor separar em ganchos personalizados do que implementar dentro do componente,
em termos de reutilização e legibilidade.
Motivo
Por que o React não acessa objetos globais - é necessário entender o conceito do React.
1) Encapsulamento e modularidade
- Cada componente deve ser independente e reutilizável. A dependência de objetos globais em muitos componentes resultaria na perda de independência e em uma complexidade enorme.
2) Desempenho e manutenção fácil
- O React renderiza novamente quando o estado muda, mas o objeto global não é adequado para rastrear mudanças de estado.
3) Gerenciamento de estado centralizado
- No entanto, se você precisar compartilhar várias variáveis, use uma biblioteca de gerenciamento de estado centralizado como Redux.
Centralizado -> controla o fluxo de dados para o componente, evitando erros e tornando a manutenção mais fácil.
* Renderização do lado do servidor
Recentemente, a renderização do lado do servidor tem sido amplamente utilizada para SEO (Otimização de mecanismos de pesquisa), mas o objeto window não é acessível do lado do servidor!!
Pensamentos
Esta é uma das dificuldades que encontrei no meu primeiro projeto React.
Trabalhei com Vue por mais de 2 anos, mas fiquei bastante surpreso quando comecei um projeto React.
não consegui exibir o mapa do Kakao...!!!
Comparado com o Vue, a estrutura de pastas, ganchos, etc., são um pouco mais livres, o que o torna ainda mais desafiador.
Penso muito sobre qual é a maneira mais eficiente de escrever.
Devo aprender mais com projetos de brinquedo, como o próprio nome sugere.
* Este é meu primeiro blog e durumis é muito original e divertido.
Ele também fornece um resumo de 3 linhas que os coreanos adoram, haha.
Você não acha que podemos conhecer desenvolvedores internacionais também?
O editor de código poderia ser melhorado.
Comentários e sugestões são bem-vindos!
Tenha um bom dia!
