我真的需要始终拥有详尽的使用效率吗?如果是这样,我在这里的想法有什么问题?

发布于 2025-02-06 05:56:21 字数 1950 浏览 0 评论 0原文

考虑以下示例(从内存中写下它,因此可能存在一些问题):

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.

Reactjs useEffect deps warning

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文