每当状态发生变化时，整个地图渲染

Question

我在我的项目中使用反应原生地图。我想基于搜索绘制多边形而不再加载整个地图。整个地图重新渲染，而不是绘制多边形本身。

我有这样的逻辑。

_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/