React中componentDidMount处理数组对象及Map组件props更新问题

看起来你已经迈出了第一步，在类组件里用componentDidMount初始化了Mapbox地图，但要实现props变化时自动更新地图中心，还需要处理组件更新的逻辑。我给你两种完善方案，类组件和函数组件的都有，按需取用～

类组件版：用生命周期处理更新 #

先把你的代码补全，再加上componentDidUpdate来监听center的变化，调用Mapbox的命令式API更新：

class Map extends Component {
  el = React.createRef();
  map = null; // 存地图实例，方便后续操作

  componentDidMount() {
    // 初始化Mapbox地图
    this.map = new mapboxgl.Map({
      container: this.el.current,
      style: 'mapbox://styles/mapbox/streets-v9',
      center: this.props.center,
      zoom: this.props.zoom || 10 // 给个默认缩放级别，避免报错
    });
  }

  componentDidUpdate(prevProps) {
    // 对比前后props的center，不一样就更新地图
    if (prevProps.center !== this.props.center && this.map) {
      this.map.setCenter(this.props.center);
    }

    // 要是zoom属性也需要同步，同样加个判断就行
    if (prevProps.zoom !== this.props.zoom && this.map) {
      this.map.setZoom(this.props.zoom);
    }
  }

  componentWillUnmount() {
    // 组件卸载时记得销毁地图实例，防止内存泄漏
    if (this.map) {
      this.map.remove();
    }
  }

  render() {
    // 给地图容器加个基础样式，不然显示不出来
    return <div ref={this.el} style={{ width: '100%', height: '400px' }} />;
  }
}

划重点： #

• componentDidUpdate：组件更新后会触发这个方法，我们通过对比prevProps和当前props，判断center是不是变了，变了就调用Mapbox的setCenter更新。
• 清理实例：在componentWillUnmount里调用map.remove()，不然组件卸载了地图还留在DOM里，会占内存。
• 空值检查：操作this.map前先确认它已经初始化了，避免报错。

函数组件（Hooks）版：更简洁的写法 #

如果是用函数组件，推荐用useRef存地图实例，useEffect处理初始化和更新：

import { useRef, useEffect } from 'react';

function Map({ center, zoom = 10 }) {
  const mapContainerRef = useRef(null); // 存地图容器DOM
  const mapRef = useRef(null); // 存地图实例

  useEffect(() => {
    // 第一次渲染时初始化地图
    if (!mapRef.current && mapContainerRef.current) {
      mapRef.current = new mapboxgl.Map({
        container: mapContainerRef.current,
        style: 'mapbox://styles/mapbox/streets-v9',
        center: center,
        zoom: zoom
      });
    }

    // 只要center或zoom变了，就更新地图
    if (mapRef.current) {
      mapRef.current.setCenter(center);
      mapRef.current.setZoom(zoom);
    }

    // 组件卸载或依赖变化时，清理旧地图
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
      }
    };
  }, [center, zoom]); // 依赖数组：center或zoom变了就重新执行effect

  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
}

函数组件小提示： #

• useRef：用来保存地图实例，不然每次渲染都会重新创建地图，浪费资源。
• 依赖数组：把center和zoom放进依赖数组，这样只有当这些props变化时，effect才会执行，避免不必要的更新。
• 清理函数：确保旧地图被销毁，防止内存泄漏。

额外提醒 #

• 记得先引入Mapbox的脚本或者npm包，不然mapboxgl会找不到哦。
• 如果你的center是数组（比如[经度, 纬度]），React的浅比较会把新数组当成不同的值，哪怕内容一样。要是想优化，可以用useMemo缓存center数组，或者在componentDidUpdate里做深比较（比如用JSON.stringify对比前后的center）。

内容的提问来源于stack exchange，提问作者Asaf Katz