Javascript React Native Maps标记的渲染速度较慢

所以我在

release

配置的设备或模拟器上运行时遇到了

react native maps

chugging的问题。在

debug

（设备和模拟器）上，map工作得很好；它反应灵敏，控制良好，等等。在

发行版上，它似乎无法处理渲染多个
组件（当我说multiple时，我不是指成百上千，我是指<20）

下面是代码示例：

constructor(props) {
    super(props);
    this.state = {
        currentPosition: global.currentPosition,
        orders: [],
        coordinateArray: []
    };
}

componentDidMount() {
    this.handleOrders().then(() => {
        this.setMapToCoordinates();
    });
}

async handleOrders() {
    let result = await data.fetchData("...");
    if (result) {
        let orders = [];
        let coordinateArray = [];

        result.data_list.forEach(orderObject => {
            let order = {
                coordinates: orderParser.constructCoordinates(orderObject),
            };
            coordinateArray.push(order.coordinates);
            orders.push(order);
        });

        this.setState({
            orders: orders,
            coordinateArray: coordinateArray
        });
    }
}

setMapToCoordinates(){
    if (this.mapView) {
        let coordinateArray = this.state.coordinateArray;
        if (this.state.currentPosition) {
            coordinateArray = coordinateArray.concat(this.state.currentPosition.coordinates);
        }
        this.mapView.fitToCoordinates(coordinateArray, {
            edgePadding: {
                top: 200,
                right: 100,
                bottom: 100,
                left: 100
            },
            animated: animated
        });
    }
}

因此，在这段代码中发生的事情是，当组件装载时，它执行一个API调用来获取一组
订单
，其中包含
坐标
，以及其他信息。除了将其推送到
订单
，它还将坐标推送到
坐标array
，这在
setMapToCoordinates（）
中用于约束贴图边界

接下来，这里是该组件的
渲染
功能：

render() {
    return (
        <MapView mapType="satellite" ref={ref => { if (!this.mapView) { this.mapView = ref; }}}>
            {this.state.orders.map(order => {
                return <MapView.Marker key={order.id} coordinate={order.coordinates} image={require("...")} />;
            })}
            {this.state.currentPosition ? <MapView.Marker key={"currentPosition"} coordinate={this.state.currentPosition.coordinates} image={require("../images/pin.png")} centerOffset={{ x: 0, y: -25 }} /> : null}
        </MapView>
    );
}

render（）{
返回(
{如果（！this.mapView）{this.mapView=ref；}}>
{this.state.orders.map（order=>{
返回；
})}
{this.state.currentPosition？：null}
);
}

这就是行动的流程：

组件装载，呈现
和
此.state.currentPosition
的单个
（在早期组件中检索）
调用
handleOrders（）
，更新
this.state.orders
和
this.state.coordinatorray
将呈现其他
组件
调用
setMapToCoordinates（）
，移动映射以使
this.state.currentPosition
和
this.state.Coordinatorray
都适合视图
在
调试
时，此工作流中没有问题，但在
发布
时，在步骤2成功与步骤3完成之间有约40秒的延迟。成功渲染这16个标记后，一切正常，但在加载期间，应用程序完全没有响应。此外，由于涉及导航，因此在单个会话中多次调用此流

如果有人知道这个问题的原因和/或如何解决，那就太好了。我很难调试它，因为在
release
scheme中，日志记录被禁用

供进一步参考：


react本地映射：^0.17.1
react-native:0.49.3
发布
方案
iPhone 6、7和7+经过测试
因此，我上面的代码中没有显示一个简单的日志语句

setMapToCoordinates(){
    console.log("Called!", this.mapView);
    ...
}

我用它来测试
this.mapView
在两种不同的情况下是什么，在
debug
配置中，它记录了
“Called！”，…
没有问题（
this.mapView
在
上设置为
ref
）

出于某种原因，在
发布版
配置中，调用
this.setMapToCoordinates（）
时，这段代码会导致速度大幅减慢，这是在API调用获取
订单
以及其他操作之后发生的

因此，虽然我不能回答这个问题的“为什么”，但我可以回答“如何”，如果其他人遇到类似的情况，也许这可以帮助他们。
我相信你的观察是正确的。在React原生官方文档（）中，它还指出console.log可能会导致严重的性能问题；虽然这不是React Native本身的问题，但不管怎样，这都是一个不错的发现。一定会考虑到未来的项目。