时间戳

首页 > 解决方案 > 如何强制一个反应组件不重新渲染？

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

问题描述

我有一个主要的反应组件（整个页面），其中包含其他几个 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>
  );
}

标签： reactjsreact-reduxopenlayers

解决方案

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

您的地图再次渲染的事实表明，地图或其一个子地图正在传递一条不断变化的数据。

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

推荐阅读