使您的React Native地图变得更快&＃xff0c;响应更快的四种方法。
为什么这很重要
作为使用React Native或任何平台/语言的移动开发人员&＃xff0c;您迟早将不得不处理地图。 而到了那个时候&＃xff0c;您需要知道如何有效地对其进行优化&＃xff0c;因为如果不这样做&＃xff0c;您的用户体验将受到极大的损害。 在本文中&＃xff0c;我将以4种可能的方式向您展示如何使您的地图更快&＃xff0c;更平滑和响应更快。
由于react-native-maps&＃xff0c;将地图放入并在React Native应用程序中使用非常简单。 这是一个简单的API&＃xff0c;您只需渲染MapView即可显示空白地图&＃xff0c;然后渲染一堆标记&＃xff0c;这些标记本质上是地图上的图钉。
如果您不熟悉react-native-map&＃xff0c;请确保在继续操作之前先查看其文档 。
问题是什么
问题是&＃xff0c;与许多其他组件一样&＃xff0c;React Native映射必须处理的数据越多 &＃xff0c;其性能就会越差 。 在公园里散步&＃xff0c;为全市最喜欢的咖啡馆显示5个标记&＃xff1b; 但是可以说&＃xff0c;如果您的应用程序显示了该国的所有麦当劳&＃xff0c;那么如果您放大足够大&＃xff0c;就会有成百上千个标记&＃xff01; 您肯定会遇到滞后的情况&＃xff0c;直到您的应用实际上无法使用。
tracksViewChanges &＃61; {false}/>);
}
2. React.memo或shouldComponentUpdate或PureComponent
最小化渲染的另一种方法是仅在Marker的道具发生实际更改时才重新渲染Marker &＃xff08;通常它们不会&＃xff1a;在地图上查看房屋时&＃xff0c;房屋的最后一次移动时间是什么时候&＃xff1f;&＃xff09; 。
React为我们提供了React.memo &＃xff08;用于功能组件&＃xff09;和shouldComponentUpdate &＃xff08;用于类组件&＃xff09;。 或者&＃xff0c;您也可以使用React.PureComponent来获得与shouldComponentUpdate相同的结果
首先&＃xff0c;以React.memo &＃xff1a;
import React from &＃39;react&＃39; ;
import { Marker } from &＃39;react-native-maps&＃39; ;
function CarPin ( props ) {const {coord} &＃61; props;return (coordinate &＃61; {coord}tracksViewChanges &＃61; {false}/>);
}
export default CarMarker &＃61; React.memo(CarPin);
一个shouldComponentUpdate的例子&＃xff1a;
import React from &＃39;react&＃39; ;
import { Marker } from &＃39;react-native-maps&＃39; ;
export default class CarPin extend React . Component {shouldComponentUpdate(nextProps) {return nextProps.coord !&＃61;&＃61; this .props.coord}render(){return (coordinate &＃61; {this.props.coord}tracksViewChanges &＃61; {false}/>);}
}
和React.PureComponent的示例&＃xff1a;
import React from &＃39;react&＃39; ;
import { Marker } from &＃39;react-native-maps&＃39; ;
export default class CarPin extend React . PureComponent {render(){return (coordinate &＃61; {this.props.coord}tracksViewChanges &＃61; {false}/>);}
}
如果您想进一步自定义组件的行为&＃xff0c;请确保查看React.memo &＃xff0c; shouldComponentUpdate和React.PureComponent官方文档。
3.使用“图标”代替“图像”来构建自定义标记
在文档中没有明确指出性能差异&＃xff0c;而是根据官方源代码 &＃xff1a;
/*** A custom image to be used as the marker&＃39;s icon. Only local image resources are allowed to be used.*/
image: PropTypes.any,
/*** Marker icon to render (equivalent to &＃96;icon&＃96; property of GMSMarker Class).Using this property has an advantage over &＃96;image&＃96; in term of performance, battery usage... because it doesn&＃39;t trigger tracksViewChanges. (tracksViewChanges is set to YES by default if iconView is not nil).*/
icon: PropTypes.any,
4.集群您的标记
让我向您展示我构建的应用程序中的示例&＃xff0c;而不是在这种情况下解释集群的含义。 下图显示了具有聚类的地图&＃xff08;左&＃xff09;和没有聚类的地图&＃xff08;右&＃xff09;
使用诸如react-native-map-clustering或&＃64; bam.tech / react-native-component-map-clustering之类的 API可以轻松完成地图聚类
尽管外观上的差异已经令人印象深刻&＃xff0c;但性能上的差异却更加惊人。 要了解原因&＃xff0c;我们必须查看地图聚类的工作方式&＃xff1a;
首先&＃xff0c;API将计算MapView上&＃xff08;相对&＃xff09;较小区域中的标记数。 代替渲染标记&＃xff0c;它将在地图上渲染标记的数量。 当用户放大或缩小时&＃xff0c;该数字将再次计算。 当用户放大足够时&＃xff0c;将显示实际标记。
这意味着&＃xff0c;该应用程序将从渲染大量标记中节省大量时间。 取而代之的是&＃xff0c;它将仅计算和呈现标记的数量。 这也是您应该注意的地方 -由于应用程序每次用户放大或缩小时都必须计算标记的数量&＃xff0c;因此请确保在渲染时间和重新计数时间之间进行权衡是值得的。
结论
优化React Native映射虽然相对简单&＃xff0c;但并不是由API自动为您完成的简单操作。 在本文中&＃xff0c;我列出了4种不同的方法&＃xff1a;
-
trackViewChanges &＃xff0c;请关闭自定义标记中的trackViewChanges 。 - 使用
React.memo或shouldComponentUpdate或React.PureComponent 。 - 使用“图标”代替“图像”来构建自定义标记。
- 集群您的标记。
我希望通过使用这些技巧&＃xff0c;您将能够构建更快&＃xff0c;响应速度更快的应用程序&＃xff0c;从而提供出色的用户体验。 祝你好运&＃xff01;
如果您对我的工作感兴趣或想要与我联系&＃xff0c;请随时 给我发送电子邮件 &＃xff0c; 访问我的Github 并 在LinkedIn上与我联系 。
From: https://hackernoon.com/how-to-optimize-react-native-map-in-your-application-eeo3nib
京公网安备 11010802041100号