我真的需要始终拥有详尽的使用效率吗?如果是这样,我在这里的想法有什么问题?
考虑以下示例(从内存中写下它,因此可能存在一些问题):
export function App(props) {
const [howManyTimesUserHasDraggedMap, setHowManyTimesUserHasDraggedMap] = useState(0);
const [mapCenter, setMapCenter] = useState<LatLng>(new LatLng(0, 0));
const [shouldLog, setShouldLog] = useState(true);
const handleCenterChange = (newCenter: LatLng) : void => {
setMapCenter(newCenter);
}
useEffect(() =>
{
setHowManyTimesUserHasDraggedMap((prev) => prev + 1);
if(shouldLog)
console.log('Updated map drag count');
} [mapCenter]);
return (
<MapComponent onCenterChange={handleCenterChange} />
);
}
例如,我们有一些称为map
的组件,该组件显示了模态中的Google Map,并且用户可以交互通过拖动和缩放地图。
假设我想跟踪用户拖动地图的次数,这与更改其中心基本相同。地图组件采用oncenterChange
prop,我给它一个函数,该功能在中心更改时会用newcenter更新mapcenter
状态。
现在,此示例有点愚蠢(我可以在handlecenterchange
中完成所有这些,但这是点的旁边),但是无论出于何种原因,我都想使用useffect
在这里增加每当mapcenter状态更改时,拖动的数量,所以我将mapcenter
放在依赖项数组中,因为这似乎是合乎逻辑的事情。我也确实有一个IF statement,可以检查showerlog
是正确的,并且logs与控制台无关的东西。
现在,这里的问题是,该使用效率的依赖项并不详尽,因为依赖性数组中缺少systerlog
,并且我的左右警告。然后,我去阅读一些文档,到处都有警告和警报,始终包括所有的所有文档依赖性。
但是现在在这里确实没有任何意义吗?为什么我要触发使用
,如果我的shordlog
- 状态更改 - 这并不意味着mapcenter
已更改。 shordlog
的值仅在中心更改时才相关。
我目前的理解是,我可以使用usefect
基本上订阅某些事件,例如当组件安装,零件卸载,组件重新呈现时或依赖关系阵列中的某些东西时。因此,在这种情况下,我将订阅当mapcenter
更改时,它将发射时会发射的事件。不过,当活动开火时,它只是碰巧检查了对记录的作用,但是记录的更改不是解雇活动的理由。
那么,我的理解是完全错误的还是正在发生的?
Consider the following example (wrote it from memory, so could have some issues):
export function App(props) {
const [howManyTimesUserHasDraggedMap, setHowManyTimesUserHasDraggedMap] = useState(0);
const [mapCenter, setMapCenter] = useState<LatLng>(new LatLng(0, 0));
const [shouldLog, setShouldLog] = useState(true);
const handleCenterChange = (newCenter: LatLng) : void => {
setMapCenter(newCenter);
}
useEffect(() =>
{
setHowManyTimesUserHasDraggedMap((prev) => prev + 1);
if(shouldLog)
console.log('Updated map drag count');
} [mapCenter]);
return (
<MapComponent onCenterChange={handleCenterChange} />
);
}
The point here is that we have, for example, some component called Map
which shows Google Maps in a modal and user can interact with the map by dragging and zooming it.
Lets say that I want to keep track of how many time the user has dragged the map, which is basically the same as changing the center of it. The Map component takes onCenterChange
prop and I give it a function which updates the mapCenter
state with the newCenter whenever the center changes.
Now this example is a bit dumb (I could do all this in the handleCenterChange
, but that's beside the point), but for whatever reason I want to use useEffect
here to increment the number of drags whenever the mapCenter state changes, so I put mapCenter
to the dependency array because that seems like the logical thing to do. I do also have an if-statement there which checks if shouldLog
is true and console.logs something irrelevant to the console if so.
Now the issue here is that the dependencies for that useEffect are not exhaustive since shouldLog
is missing from the dependency array and I'm getting warnings left and right. I then go read some documentation and there are warnings and alerts everywhere to ALWAYS INCLUDE ALL THE DEPENDENCIES.
But that doesn't really make sense here now does it? Why should I trigger that useEffect
if my shouldLog
-state changes - that doesn't mean that the mapCenter
has changed. shouldLog
's value is only relevant if the center changes.
My current understanding is that I can use useEffect
to basically subscribe into certain events, such as when the component mounts, when the component unmounts, when the component re-renders or when something in the dependency array changes. So in this case I am subscribing to an event that fires when mapCenter
changes and that is when it should ever fire. When the event fires though, it just happens to check what it should do regarding to logging, but the change in logging isn't a reason to fire the event.
So is my understanding completely wrong here or what is going on?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论