时间戳

首页 > 解决方案 > 使用 useEffect 处理 API 调用与使用 useCallback

reactjs - 使用 useEffect 处理 API 调用与使用 useCallback

问题描述

这很可能是一个愚蠢的问题——我的理解是任何触发副作用的东西都应该用useEffect. 我想知道这种理解是否正确。useCallback特别是在进行 API 调用的情况下——在挂钩中进行 API 调用是否很好？

标签： reactjsreact-hooksuse-effectside-effectsusecallback

解决方案

如果您想基于某种道具或状态更改来执行此操作，请使用useEffect钩子，例如，

useEffect(async ()=> {
    const user = await userApi.get(props.id)
    
    setUser(user)
}, [props.id]}

如果您想在单击按钮（或任何事件）时这样做，

const handleClick = () => {
    const user = await userApi.get(props.id)
        
    setUser(user)
}

useCallback并不真正依赖于 api 调用或副作用。useCallback基本上是根据依赖关系存储函数的“版本”。当依赖项发生变化时，您会得到一个新函数，因为它返回的内容会有所不同，例如，

// props.id = 1
const doSomethingCallback = useCallback(() => { 
    /* do something with props.id */
}, [props.id])

While props.id === 1,doSomethingCallback将始终引用在第一次渲染时声明的函数。如果props.id更改为 2，useCallback将引用一个新函数。因此，如果doSomethingCallback是 a 的依赖项useEffect，当props.id更改为 2 时，useCallback将指向一个新函数，然后会被 the 注意到useEffect并运行其中的任何内容，例如，

useEffect(() => { /* side-effect stuff */}, [doSomethingCallback])

推荐阅读