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;
    }
}

即使道具未更改，组件也会更新

1 个答案: