Question

我在我的项目中使用react native映射。我想基于搜索绘制多边形，而无需再次加载整个地图。重新绘制整个地图，而不是绘制多边形本身。

我有这样的逻辑。

_getMapData将根据搜索呈现下面的地图和多边形。它将调用每个过滤器更改或componentWillMount。

<MapView  initialRegion={region} zoomEnrabled>
              {mapData.map((data, index) => (
                <MapView.Polygon
                  key={index}
                  coordinates={data.coordinates}
                  fillColor={data.properties.polygonColor}
                  strokeColor="rgba(88, 136, 177, 0)"
                  strokeWidth={0}
                  tappable
                />
              ))}
</MapView>

搜索过滤器屏幕不同，当搜索完成时，仅导航到地图屏幕。地图屏幕具有_getMapData函数。

Answer 1

当然，组件在每次状态更改后都会重新渲染，这就是它对react / react-native的工作方式，有时可能是一个常见问题。

但是，您可以使用shouldcomponentupdate来防止状态改变后再次重新渲染整个组件。

Answer 2

基于last comment from OP，该数据存储在redux中，有一种可能的解决方案：从拥有<Map>的组件中排除与多边形有关的任何数据，以避免重新渲染。多边形应使用React v16 +中提供的Fragment在另一个组件内渲染。

class MapPolygons extends React.Component {
   ...
   render() {
       return (
          <>
              {mapData.map((data, index) => (
                <MapView.Polygon
                  key={index}
                  coordinates={data.coordinates}
                  fillColor={data.properties.polygonColor}
                  strokeColor="rgba(88, 136, 177, 0)"
                  strokeWidth={0}
                  tappable
                />
              ))}
          </>
       )
   }
}

以及原始组件中的

<MapView  initialRegion={region} zoomEnrabled>
  <MapPolygons />
</MapView>

再次mapData或任何可更新多边形的数据痕迹应从包含<MapView>的组件中删除，或者，如果不可能的话，应在shouldComponentUpdate中处理它们以避免不必要的处理重新渲染。

Answer 3

将“ MapView”设置为“ PureComponenet” 这里的更多信息：https://lucybain.com/blog/2018/react-js-pure-component/

每当状态更改时，整个地图都会呈现

3 个答案: