所以,我一直在试验 ReactJS 并且我一直在测试它在加载大量数据时的性能,我注意到它非常繁重。特别是,我注意到在我的演示应用程序加载了几千行之后,它开始使用数百兆字节。保留足够长的时间,大约 10,000 行,它将超过 1 GB 的 RAM 使用量。
编辑:我相信高 RAM 使用率是由打开 React DevTools 窗口引起的。似乎使用它显着增加了使用的 RAM 量。但是,如果不打开它,它仍然会使用几百 MB(最多 500 MB,低至 350 MB),我认为这对于一个大列表来说已经相当多了。
我在下面提供了我的应用程序。它是完全独立的,因此只需创建一个文件(index.html 或其他文件)并将所有这些文本放入其中,然后运行该文件(或可选择将其托管在 Web 服务器上以访问 React DevTools)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ol {
margin-left: 50px;
list-style-type: none;
}
p { display: inline; }
img {height: 1em; }
</style>
<script type="text/babel">
class ListItem extends …Run Code Online (Sandbox Code Playgroud) 我想跟进这个问题: Changing Cursor on Drag in openlayers 3
提供的答案是合理的,并且有一个可行的例子。我已经使用了基本的 OpenLayers 快速入门代码,并将用户的答案添加到其中进行测试,很遗憾,它不起作用。
发生的情况是,“pointerup”中定义的光标是起始光标,当您单击并按住以拖动地图时,它会保持为该光标,直到您松开鼠标按钮以停止拖动。您会看到手形图标发生非常短暂的变化,然后变回指针向上光标。它的行为就像在发生拖动操作时无法更改光标一样。
可以采取什么措施来解决这个问题?
下面是我的示例文件的完整代码。请注意,在 jsfiddle 中,它演示了预期的行为。但是当我创建一个文件(例如“test-drag.html”)并将其加载到 Chrome 中时,它的行为就像我所描述的那样。
<html>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<body>
<div id="map" class="map" style="width:1200px;height:800px"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom:2
})
});
map.getViewport().style.cursor = "-webkit-grab";
map.on('pointerdrag', function(evt) {
map.getViewport().style.cursor = "-webkit-grabbing";
});
map.on('pointerup', function(evt) {
map.getViewport().style.cursor = "-webkit-grab";
});
</script>
</body>
</html>Run Code Online (Sandbox Code Playgroud)