React中Google Maps仅在位置变化时更新标记的实现方法

针对你遇到的表单输入时地图频繁重渲染导致卡顿的问题，我们可以通过React的生命周期函数或内置优化组件来精准控制重渲染时机，核心思路就是只在地图依赖的坐标数据真正变化时才触发重渲染。下面是具体的解决方案：

1. 使用shouldComponentUpdate生命周期函数（类组件专属） #

这正是你问到的生命周期函数，它会在组件准备重渲染前被调用，你可以在这里手动校验新旧props/state的差异，返回true就允许重渲染，返回false则跳过。

假设你的组件state里存储了两个标记的坐标：latitude、longitude（第一个标记）和latitude2、longitude2（第二个标记），你可以这样写：

shouldComponentUpdate(nextProps, nextState) {
  // 仅当任意一个标记的经纬度发生真实变化时，才允许组件重渲染
  return (
    nextState.latitude !== this.state.latitude ||
    nextState.longitude !== this.state.longitude ||
    nextState.latitude2 !== this.state.latitude2 ||
    nextState.longitude2 !== this.state.longitude2
  );
}

如果你的经纬度是从props传入的，那就对比nextProps和this.props里的坐标值，逻辑完全一致。

2. 改用React.PureComponent（类组件快速方案） #

如果你的组件重渲染只依赖于props和state的浅比较（比如坐标都是数字、字符串这类基本类型），可以直接让组件继承PureComponent而非普通的Component。它会自动帮你做浅比较，避免不必要的重渲染：

import React, { PureComponent } from 'react';

class YourMapComponent extends PureComponent {
  // 你的组件逻辑，包括表单和地图渲染
}

⚠️ 注意：如果state/props里有复杂对象（比如嵌套对象、数组），浅比较可能会失效（因为对象引用没变但内部值变了），这时候还是得用shouldComponentUpdate做自定义的深比较。

3. 拆分组件进一步优化 #

建议你把Google Map单独抽成一个子组件，让表单和地图分离开。这样表单输入时只会触发父组件的重渲染，而地图子组件只要接收到的坐标props没变化，就不会重渲染。

示例代码结构：

// 父组件：处理表单逻辑
class FormContainer extends Component {
  state = {
    latitude: 0,
    longitude: 0,
    latitude2: 0,
    longitude2: 0
  };

  onFormChange = (field, e) => {
    // 把表单输入转成数字，避免字符串和数字的无意义差异
    const value = parseFloat(e.target.value);
    this.setState({ [field]: value });
  };

  render() {
    const { latitude, longitude, latitude2, longitude2 } = this.state;
    return (
      <div>
        {/* 你的表单代码 */}
        <FormGroup>
          <FormControl 
            type="decimal" 
            required 
            label="Latitude" 
            placeholder="Latitude" 
            value={latitude} 
            onChange={e => this.onFormChange('latitude', e)} 
          />
        </FormGroup>
        {/* 其他表单字段... */}
        {/* 地图子组件 */}
        <MapComponent 
          lat1={latitude} 
          lng1={longitude} 
          lat2={latitude2} 
          lng2={longitude2} 
        />
      </div>
    );
  }
}

// 地图子组件：用PureComponent或shouldComponentUpdate优化
class MapComponent extends PureComponent {
  render() {
    const { lat1, lng1, lat2, lng2 } = this.props;
    // 渲染Google Map和两个标记的逻辑
    return <GoogleMap ... />;
  }
}

额外注意点：统一数据类型 #

表单输入的值默认是字符串类型，如果你state里存的是数字，那每次输入时字符串和数字的对比会被认为是不同的，导致不必要的重渲染。所以一定要在onFormChange里把输入值转换成数字，就像上面代码里的parseFloat(e.target.value)那样。

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