如何解决React useCallback:useCallback 每次还是重新渲染函数
我对 react 中的 useMemo
和 useCallback
钩子还很陌生,我有点困惑为什么即使我正在检查变量,我的函数仍然继续重新渲染反对保持不变。目前我正在尝试构建一个谷歌地图,允许用户打开和关闭地图上显示的某些标记。我的功能组件应该只需要在加载时呈现这些标记一次,然后在此之后记住它们,因为它们之后才被打开/关闭。现在我明白了这样的钩子只能进行浅层比较的概念,但我正在比较布尔值,我认为这些钩子能够理解。
这是我当前的地图文件:
// 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,[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!
解决方法
您似乎误解了useCallback
。
如果您 useCallback
某些函数,如果依赖项不改变,它就不会重新创建。但如果您手动调用它,它会一直运行。
当您单击任何复选框时,地图会重新呈现。如果说 renderPlaces
的依赖项未更改,则该函数将保持不变,但之后您无论如何都要在渲染中手动调用它:renderPlaces()
。
根据您的设置,我的建议是将 renderPlaces
和其他两个函数作为普通组件(并在 Map
组件之外定义它们)并应用 {{3 }} 在他们身上。
一般来说,我建议渲染组件而不是调用它们,例如最好使用 <Component/>
而不是 Component()
。在函数组件中定义函数组件是一个坏主意,因为 reacts 协调算法会认为它们在每次渲染时都是不同的类型(因为如果你在函数内部定义函数,它每次都会重新创建)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。