Question

我有一个主要的反应组件（整个页面），其中包含其他几个 UI 项目。这些 UI 项之一是 OpenLayers 地图。另一个组件是包含当前鼠标指针位置的纬度和经度的文本字段。

我希望只要鼠标指针在地图上移动，文本字段就会更新。在我的代码当前状态下，这有效。

问题是每次鼠标移动并且我更新纬度/经度（按预期在文本字段中呈现）的反应状态值时，地图都会重新呈现。这看起来很糟糕，因为每次开始加载地图图块时地图都会闪烁。

所以我有鼠标纬度/经度位置，但我无法让地图不闪烁/口吃/频闪。

有没有办法从地图组件获取鼠标事件，并将其发送到同一屏幕上的另一个组件，而不会导致渲染方法每次重绘地图？或者 React 是这个项目的错误工具？

请注意，我使用 React Redux 来处理一些状态值，例如地图对象。我所有的子组件都是 React 功能组件，但页面的主要组件是 React 类组件。

如果有帮助，我会像这样在地图上设置鼠标监听器：

this.props.map.on('pointermove', event => {
  this.setState({
    mouseCoordinates: (event.coordinate),
  });
});

这是我的渲染方法：

render() {
  return (
    <div className="main">
      <p className={noMargPad}>
        {this.state.mouseCoordinates}
      </p>
      <Map
        center={fromLonLat(this.state.center)}
        zoom={this.state.zoom}
      >
        <Layers>
          <TileLayer source={osm()} zIndex={0} />
          {this.state.showLayer1 && (
            <VectorLayer
              source={vector({
                features: new GeoJSON().readFeatures(geojsonObject, {
                  featureProjection: get("EPSG:3857"),
                }),
              })}
              style={FeatureStyles.MultiPolygon}
            />
          )}
          {this.state.showMarker && (
            <VectorLayer source={vector({
                features: this.state.features 
            })} />
          )}
        </Layers>
        <Controls>
          <FullScreenControl />
        </Controls>
      </Map>
    </div>
  );
}

Answer 1

使用像 React 这样的工具的主要优点之一是它只会刷新渲染方法中已更新其依赖数据的组件。有关详细信息，请参阅 this article。

您的地图再次呈现这一事实表明该地图或其一个子地图正在传递一段不断变化的数据。

根据您的代码，一种可能性是调用 OSM()，因为它是来自 OpenLayers API 的构造函数。 JavaScript 中的新对象/类实例可能会导致数据重新渲染。

如何强制一个反应组件不重新渲染？

1 个答案: