React组件初始化优化：如何仅渲染一次并填充Google Maps标记列表

嗨，我来帮你搞定这个问题！咱们一步步拆解原因和解决方案：

问题根源分析 #

你遇到的组件初始化时渲染两次，主要是两个原因导致的：

• 直接修改this.state.markersList数组（比如用push）：React的state是不可变的，直接修改原state不会触发正确的状态更新逻辑，还可能引发意外的重渲染
• 错误使用ComponentWillMount：这个生命周期方法在React 17+已经被废弃，而且它在组件首次render前执行，在这里处理地图初始化会和DOM渲染时机冲突，容易导致额外渲染

正确解决方案 #

1. 用componentDidMount做初始化 #

这个方法是类组件里最适合做一次性初始化的地方——它只会在组件挂载完成（DOM渲染完毕）后执行一次，完美匹配你“仅渲染一次组件”的需求。

2. 正确更新标记列表 #

别直接修改原state数组，先创建一个临时数组收集所有标记，最后一次性调用setState更新，避免多次触发重渲染。

完整代码示例 #

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: "",
      markersList: [],
      locations: [
        { title: "北京", lat: 39.9042, lng: 116.4074 },
        { title: "上海", lat: 31.2304, lng: 121.4737 }
        // 可以添加更多地点数据
      ]
    };
    // 绑定方法到组件实例
    this.initMap = this.initMap.bind(this);
  }

  componentDidMount() {
    // 组件挂载完成后初始化地图，只会执行一次
    this.initMap();
  }

  initMap() {
    // 初始化Google Map实例
    const map = new window.google.maps.Map(document.getElementById("map"), {
      center: { lat: 39.9042, lng: 116.4074 },
      zoom: 10
    });

    const newMarkers = [];
    // 循环创建标记并收集到临时数组
    this.state.locations.forEach(location => {
      const marker = new window.google.maps.Marker({
        position: { lat: location.lat, lng: location.lng },
        map: map,
        title: location.title
      });
      newMarkers.push(marker);
    });

    // 一次性更新state，只触发一次重渲染
    this.setState({
      map: map,
      markersList: newMarkers
    });
  }

  render() {
    return (
      <div>
        <div id="map" style={{ height: "400px", width: "100%" }}></div>
        {/* 其他组件内容 */}
      </div>
    );
  }
}

关键要点总结 #

• 永远不要直接修改this.state，必须通过setState更新，且要基于原state创建新的数组/对象
• 地图初始化、数据请求这类只需要执行一次的操作，放在componentDidMount里最稳妥
• 批量更新state（比如收集所有标记后一次性setState）能避免不必要的重渲染

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