即使 prop 没有更改，组件也会更新

Question

我有一个从父组件获取数据的 MapBox 组件。

我试图避免每次父组件中发生状态更改时更新组件。即使 shouldComponentUpdate 记录相同的道具，它也会更新...

地图儿童

    componentDidMount(){
        if(this.props.data.features !== null){
            this.fetchMap();
        }
    }

    shouldComponentUpdate(nextProps) {
        console.log('now:', this.props.data)
        console.log('next', nextProps.data)
        if (this.props.data === nextProps.data) {
            return false;
        }
        if (this.props.data !== nextProps.data) {
            return true;
        }
        return false;
    }
    componentDidUpdate(prevProps) {
        if (this.props.data !== prevProps.data) {
            this.fetchMap();
        }
    }
    fetchMap() {
        const { data } = this.props
        const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/light-v9',
            center: [8.32, 60.44],
            zoom: 5,
        })

        map.on('load', () => {

                map.addSource('locations', {
                    type: 'geojson',
                    data
                });
        });
    }

   .... render and return bla bla

家长：

const Parent () => {
   const [state, change] = useState(false)
   return (
     <Button onClick={change(!state)}>Sorter</Button> // click and <Map> rerenders
     <Map setDraw={setDraw} data={geojson} />
   )
}

Answer 1

我有 3 种方法来实现它

1 父调用状态使用回调函数方式，强制对象进入一个新的对象。

this.setState((state) => { 
return  {...state};
 });

您可以在以下位置查看此 api：https://reactjs.org/docs/react-component.html#setstate

2深度比较意味着你需要对数组中的项目一个一个的检查。或者暴力，我将数组或对象变成字符串然后比较。

3 您可以为数组中的每个项目创建组件，然后比较每个组件的差异。

const geojson = {
    id:0,// +1 when changed
    type: "FeatureCollection",
    features: locations
};

shouldComponentUpdate(nextProps) {// becacuse nextProps are always a different object from props
    if (this.props.data.id === nextProps.data.id) {
      return false;
    }else{
      return true;
    }
}