React中两次调用navigator.geolocation.watchPosition：更新频率不一致

我之前碰到过类似的定位回调异常问题，结合你的代码和描述，这几个方向可以优先排查：

1. this上下文丢失导致回调执行中断 #

你传递给watchPosition的this.watchPosition方法没有正确绑定组件实例的this。当地理定位API触发回调时，this会指向全局对象（非严格模式）或者undefined（严格模式），这会导致this.props.dispatch抛出错误——看起来像是回调没触发，但其实是执行到一半报错中断了。

解决方法二选一即可：

• 在构造函数里绑定this：

  constructor(props) {
    super(props);
    this.watchPosition = this.watchPosition.bind(this);
  }
  

• 用箭头函数包裹回调，自动绑定上下文：

  componentDidMount() { 
    let watchId = window.navigator.geolocation.watchPosition(
      (position) => this.watchPosition(position), 
      err => console.log(err), 
      { 
        enableHighAccuracy: true, 
        maximumAge: 0, 
        timeout: 5000 
      }
    ) 
    this.setState({ ...this.state, watchId }) 
  }
  

2. watchId的异步状态更新导致清除失效 #

你用setState保存watchId，但setState是异步操作。如果组件在setState完成前就触发了componentWillUnmount，this.state.watchId还是旧值，导致无法正确清除当前的watch实例。残留的旧watch和新watch互相干扰，就会造成回调触发无规律。

建议直接把watchId存在组件实例属性里，跳过state的异步更新：

componentDidMount() { 
  this.watchId = window.navigator.geolocation.watchPosition(
    this.watchPosition, 
    err => console.log(err), 
    { 
      enableHighAccuracy: true, 
      maximumAge: 0, 
      timeout: 5000 
    }
  ) 
} 
componentWillUnmount() { 
  navigator.geolocation.clearWatch(this.watchId); 
}

3. 浏览器的节流或标签页状态限制 #

浏览器为了节省性能有默认限制：

• 当页面处于非活跃标签页时，会大幅降低地理定位的更新频率，甚至暂停更新；
• 同一页面的多个watchPosition请求可能会被合并节流，优先响应先创建的那个（也就是你在渲染前导入组件里的watch）。

如果你的React组件是在页面加载后一段时间才挂载的，或者所在标签页曾切换到后台，就会出现回调触发频率极低的情况。

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