React Native中render()方法为何被调用两次？

嘿，这个问题我太熟了！咱们一步步来拆解原因：

• 第一次渲染：组件初始挂载的默认渲染
  你在App类组件的state里把latitude和longitude初始设为了null。当React挂载这个组件时，会先执行render()方法，用这些初始的空值来渲染界面——这是React类组件生命周期的必经环节，目的是先把组件的基础结构渲染出来。

• 第二次渲染：setState()触发的重渲染
  componentDidMount()是在组件第一次渲染完成后才会执行的生命周期方法。你在这里获取到用户的当前位置后，调用了setState()来更新latitude和longitude的值。而React的核心机制就是：只要调用setState()且state发生了实际变化，就会触发组件的重渲染，也就是再次调用render()，这时候地图就能使用用户的真实位置数据来渲染了。

额外补充（如果是React 18开发环境） #

如果你的项目用的是React 18的严格模式（开发环境默认开启），类组件的render()可能会被额外多调用一次——这是React用来帮你检测组件里的副作用是否符合规范的机制，生产环境下不会有这个额外的渲染。但你遇到的两次渲染，核心原因还是前面说的初始渲染+state更新触发的渲染。

其实这是React组件的正常行为，它保证了组件能从初始的空状态，切换到有真实数据的状态。如果想优化用户体验，可以在render()里判断：当latitude或longitude为null时，显示加载提示（比如正在获取你的位置...），等位置数据到位后再渲染地图~

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