Mapbox React Examples 基础篇用 useRef useEffect 两步法在 React 中正确初始化并销毁 Mapbox 地图【免费下载链接】mapbox-react-examplesExample patterns for building React apps with Mapbox GL JS项目地址: https://gitcode.com/gh_mirrors/ma/mapbox-react-examplesMapbox React Examples 是 Mapbox 官方开源的 React 地图应用示例库教你用 Mapbox GL JS 构建 React 地图应用。本文以其中的 basic 基础示例为主线带你用 useRef useEffect 正确完成地图的初始化与销毁一次讲透 React 中挂载 Mapbox 地图的核心模式。准备工作获取 Mapbox Access Token 并克隆示例在写任何代码之前你需要两样东西Access Token访问令牌Mapbox 的钥匙所有地图请求都靠它鉴权basic 示例代码本仓库中最精简、最适合入门的地图示例。克隆仓库并进入基础示例目录git clone https://gitcode.com/gh_mirrors/ma/mapbox-react-examples cd mapbox-react-examples/basic npm install npm start启动后访问 http://localhost:3000/ 即可看到一张可拖拽、可缩放的地图 ️。⚠️ 记得把 Access Token 替换成自己的。Token 配置位置在 Map.js 顶部mapboxgl.accessToken 你的_API_KEY_填在这里;各示例的运行说明可参考 basic/README.md依赖版本mapbox-gl 2.x React 18见 package.json。核心模式useRef 拿到容器useEffect 里建图这是 React 集成 Mapbox 地图最关键的一段代码完整逻辑在 Map.js 中。我们拆开看第 1 步用 useRef 拿到地图容器 DOMMapbox 地图是命令式的它必须先挂到一个真实的 DOM 节点上。useRef(null)创建的引用不会触发重渲染正好用来稳稳地握住这个 DOM 节点const mapContainerRef useRef(null); // ... div classNamemap-container ref{mapContainerRef} /第 2 步在 useEffect 中初始化地图useEffect空依赖数组[]保证地图只在组件挂载时创建一次正好对应初始化这个动作useEffect(() { const map new mapboxgl.Map({ container: mapContainerRef.current, // 第 1 步的容器 style: mapbox://styles/mapbox/streets-v11, center: [lng, lat], zoom: zoom }); // 添加右上角的 /- 缩放导航控件 map.addControl(new mapboxgl.NavigationControl(), top-right); // 地图移动时把中心坐标和缩放级别同步回 React 状态 map.on(move, () { setLng(map.getCenter().lng.toFixed(4)); setLat(map.getCenter().lat.toFixed(4)); setZoom(map.getZoom().toFixed(2)); }); // 关键组件卸载时销毁地图 return () map.remove(); }, []);第 3 步用 cleanup 函数销毁地图return () map.remove()是很多人忽略却最致命的一行。React 18 的 StrictMode 下 effect 会挂载 → 卸载 → 再挂载如果不调用map.remove()就会出现同一容器里叠加多张地图画面花屏WebGL 上下文泄漏页面越来越卡控制台报A map is already initialized之类的错误。 一句话记忆谁创建谁销毁。useEffect 创建地图useEffect 的清理函数销毁地图。为什么不能直接在 JSX 或组件函数体里 new 地图新手最容易踩的坑错误写法后果在组件函数体里直接new mapboxgl.Map()每次渲染都新建一张地图性能灾难在 JSX 的ref回调或render里初始化同左且容器可能尚未就绪只初始化、不remove()内存泄漏 重复初始化报错依赖useState的初始值渲染地图状态更新后地图不会自动跟随正确姿势始终是DOM 由 ref 提供生命周期交给 useEffect——这正是 Map.js 展示的模式。应用入口同样遵循 React 18 的标准写法通过createRoot挂载并开启 StrictMode见 index.js这也正是必须写销毁逻辑的原因。进阶地图移动数据如何流回 Reactbasic 示例还有一个精妙之处地图移动时通过move事件把经纬度、缩放级别写回 React state再渲染到左上角的侧边栏。也就是说数据是双向的React → 地图state 提供初始center/zoom地图 → Reactmove事件更新 state侧边栏实时显示。侧边栏样式定义在 Map.css注意.map-container使用position: absolute铺满全屏——这是地图容器常见的 CSS 处理方式新手容易漏掉导致地图高度为 0。跑通基础篇之后仓库里还有哪些示例可练手basic 只是起点同一套useRef useEffect 销毁模式贯穿所有示例建议按此顺序进阶示例目录练手内容markers-default用 GeoJSON 数据批量添加默认标记点markers-custom自定义样式的标记点markers-symbol用符号图层Symbol Layer画标记data-overlay数据图层叠加与交互data-overlay-redux地图状态接入 Redux 管理react-tooltip用 React 组件做地图提示框总结三步搞定 Mapbox React 地图初始化useRef 接容器ref{mapContainerRef}给地图一个落点useEffect 建地图空依赖数组保证只初始化一次cleanup 里 map.remove()组件卸载即销毁杜绝内存泄漏。把这个模式吃透再看仓库里标记点、数据叠加、Redux 集成等进阶示例都会发现它们只是在这套骨架上做延伸。动手跑一遍 basic 示例是你掌握 React Mapbox 地图最快的路径 。【免费下载链接】mapbox-react-examplesExample patterns for building React apps with Mapbox GL JS项目地址: https://gitcode.com/gh_mirrors/ma/mapbox-react-examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考