Question

我的带有简单MapBox的组件会在与该组件无关的每个状态更改中被重新渲染？任何想法如何防止这种情况？

如果我不将data道具添加到useEffect的第二个参数中就不会发生，但是我需要在实际数据更改时重新呈现它。.

地图组件：

const getMap = () => {
    return new mapboxgl.Map({
        container: 'mapContainer',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [7.32, 60.44],
        zoom: 6,
    })
};
const Map = (props) => {
  const { data } = props
  if (data['features'] != null) {
        useEffect(() => {
            const map = getMap();

            map.on('load', function () {

                map.addSource('malls', {
                    type: "geojson",
                    data: data,
                    cluster: true,
                    clusterMaxZoom: 14, 
                    clusterRadius: 50 
                });

            });
        }, [data]); //

  }
  return (
        <div style={style} id="mapContainer" />
  );
}

Answer 1

如Rules of Hooks中所述，应始终在外部条件条件下调用钩子。您可以将钩子移到顶层，并在钩子内部移动条件。

const Map = (props) => {
  const { data } = props
  useEffect(() => {
    if (data['features'] != null) {
      const map = getMap();
      map.on('load', function () {
        map.addSource('malls', {
          type: "geojson",
          data: data,
          cluster: true,
          clusterMaxZoom: 14, 
          clusterRadius: 50 
        });
      });
    }
  }, [data]);

  return (
    <div style={style} id="mapContainer" />
  );
}

Answer 2

您应该使用类并实现shouldComponentUpdate函数，而不是将其编写为函数。

组件在状态更改时重新渲染

2 个答案: