React useCallback: useCallback 仍然是每次重新渲染函数

Question

我对 React 中的 useMemo 和 useCallback 挂钩相当陌生，我有点困惑为什么我的函数仍然继续重新渲染，即使变量 I' m 检查保持不变。目前我正在尝试构建一个 google 地图，允许用户打开和关闭地图上显示的某些标记。我的功能组件应该只需要在加载时渲染这些标记一次，然后在之后记住它们，因为它们只是在之后被转换 on/off 。现在我理解了诸如此类的挂钩仅进行浅表比较的概念，但我正在比较我认为这些挂钩能够理解的布尔值。

这是我当前的地图文件：

// constants are above

function Map() {

    const {isLoaded} = useJsApiLoader({
        googleMapsApiKey: env.GOOGLE_MAPS_API.API_KEY,
        libraries: libs
    }) 

    const [map, setMap] = useState(null);
    const [places,setPlaces] = useState([]);
    const [places2,setPlaces2] = useState([]);
    const [heatMap,setHeatMap] = useState([]);
    const [fetchingData, setFetchingData] = useState(true);
    const [showPlaces,setShowPlaces] = useState(true);
    const [showPlaces2,setShowPlaces2] = useState(false);
    const [showHeatMap,setShowHeatMap] = useState(false);

    useEffect(() => {
        let mounted = true;

        if(mounted){
            socket.emit('getMapAnalytics', ([heatmap,places,places2]) => {
                console.log({heatmap})
                setPlaces(places);
                setPlaces2(places2);
                setHeatMap(heatmap);
                setFetchingData(false);
            });            
        }

        return () => {
            mounted = false;
        }
    },[])

    const onLoad = useCallback((map) => {
        setMap(map);
    },[])

    const onUnmount = useCallback((map) => {
        setMap(null);
    },[]);

    const renderPlacesMarkers = useCallback(() => {
        console.log('rendering places')
        if(showPlaces){
            return places.map(place => (
                <Marker icon={icon} key={place.ID} title={place.Name} position={{lat:place.Latitude,lng:place.Longitude}}/>
            ))
        }
        return null;
    },[showPlaces]);

    const renderPlaces2Markers = useCallback(() => {
        console.log('rendering places2')
        if(showPlaces2){
            return places2.map(place => (
                <Marker key={place.ID} title={place.ID} position={{lat:place.Latitude,lng:place.Longitude}}/>
            ))
        }
        return null;
    },[showPlaces2]);

    const renderHeatMap = useCallback(() => {
        console.log('rendering heat map')
        if(showHeatMap){
            const mapData = heatMap.map(location => ({
                location: new google.maps.LatLng(location.Latitude,location.Longitude), weight: location.population_density
            }))

            return (<HeatmapLayer data={mapData} options={{gradient: gradient}} />)
        }
        return null;
    },[showHeatMap]);

    const onChecked = (e) => {
        switch(e.target.id){
            case 'places': setShowPlaces(e.target.checked);
                break;
            case 'places2': setShowPlaces2(e.target.checked);
                break;
            case 'heat-map': setShowHeatMap(e.target.checked);
                break;
        }
    }

    return isLoaded && !fetchingData ? (
        <div id="map-container">
            <div id="top-bar" style={{display: 'flex', justifyContent:'space-evenly'}}>
                <div style={{display: 'flex'}}>
                    <input type="checkbox" id="places" checked={showPlaces} onChange={onChecked}></input><label>techs</label>
                </div>
                <div style={{display: 'flex'}}>
                    <input type="checkbox" id="places2" checked={showPlaces2} onChange={onChecked}></input><label>kiosks</label>
                </div>
                <div style={{display: 'flex'}}>
                    <input type="checkbox" id="heat-map" checked={showHeatMap} onChange={onChecked}></input><label>heatmap</label>
                </div>
            </div>
            <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={onLoad} onUnmount={onUnmount}>
                {renderPlacesMarkers()}
                {renderPlaces2Markers()}
                {renderHeatMap()}
            </GoogleMap>
        </div>        
    ) : <Spinner margin="margin-25"></Spinner>
}

export default memo(Map);

我已经尝试将 useCallback 参数设置为其他参数，例如 places 和 places2 的数组长度，但最终仍然会重新渲染每个函数。

我唯一能想到的就是让这些方法每次都重新渲染，因为我要返回一个 JSX 元素数组，但我在网上找不到很好的例子。如果有人能指出我正确的方向以正确理解为什么会发生这种情况，那就太好了。 TIA！

Answer 1

看来你误会了useCallback。

如果您 useCallback 某些功能，如果依赖项不更改，则不会 重新创建 。但是，如果您手动调用它，它将始终运行。

当您单击任何复选框时，地图将重新呈现。如果 say renderPlaces 的依赖项没有改变，函数将保持不变，但之后你仍然在渲染中手动调用它：renderPlaces().

根据你的设置，我的建议是将 renderPlaces 和其他两个函数作为正常的 components （并在 Map 组件之外定义它们）并对它们应用 React.memo。

一般来说，我建议渲染组件而不是调用它们，例如最好使用 <Component/> 而不是 Component()。在功能组件内部定义功能组件是一个坏主意，因为 Reacts 协调算法会认为它们在每次渲染时都是不同的类型（因为如果您在函数内部定义函数，它将每次都重新创建）。

React useCallback: useCallback 仍然是每次重新渲染函数

React useCallback: useCallback is still re-rendering function each time

reactjs

react-hooks

usecallback